JS Ajax请求如何防止重复提交
好长时间没写js代码了刚好遇到这样的问题。我们系统多数表单没有做防止重复提交的。
由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值。
所以我想在,js这边动手。其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了。思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知。
我想架构的目的之一,就在于简化业务开发,屏蔽掉业务无关的细节,让一线开发安心写业务吧。
代码如下:
/** * Created by xiayongsheng on 2016/6/12. */ ;(function($){ var ajax = $.ajax; // 用于存储ajax的请求 var ajaxState = {}; var kinhomAjax = function () { var args = Array.prototype.slice.call(arguments, 0); // url data 一致, // 应该将 url取出,data按键值排序,后将值拼接在一起,进行sha1得到的值作为指纹 // 累先用 url作为指纹吧 var hash = typeof args[0] === 'string'?args[0]:args[0].url; if (typeof ajaxState[hash] !== 'undefined') { if (ajaxState[hash] > 3) { alert('请不要重复提交,请求正在处理中'); } ++ajaxState[hash]; return $.Deferred(); } ajaxState[hash] = 1; var def = ajax.apply($,args); def.done(function () { delete ajaxState[hash]; }); return def; }; $.ajax = kinhomAjax; })(jQuery);
以上所述是小编给大家介绍的JS Ajax请求如何防止重复提交的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
防止重复发送Ajax请求的解决方案
在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请
-
Ajax校验是否重复的实现代码
直接贴代码! 一.controller层: @ResponseBody @RequestMapping("entityFindByCode") public String entityFindByCode(Entity bean, HttpSession httpSession, Model m,HttpServletResponse res) throws IOException{ res.setContentType("text/plain; charset=UTF-8&
-
jQuery validate插件实现ajax验证重复的2种方法
本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
-
AJAX避免用户重复提交请求实现方案
在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮. 重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性. Demo: 复制代码 代码如下: <body> <a class="disabled">Button disabeld</a> <a class="abled">Butt
-
jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'
-
防止ajax重复请求的方法(GET和POST)
复制代码 代码如下: /* 防止ajax重复请求的GET和POST方法 */ jQuery.extend({ getx:function(url,data,callback,sender){ var params={url:url,data:null,callback:null,sender:null}; for(var i=1;i<arguments.length;i++){ if(arguments[i]!=null){ var ptype=typeof(arguments[i]); if(
-
Ajax局部更新导致JS事件重复触发问题的解决方法
如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... --------------------
-
JS Ajax请求如何防止重复提交
好长时间没写js代码了刚好遇到这样的问题.我们系统多数表单没有做防止重复提交的. 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值. 所以我想在,js这边动手.其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了.思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知. 我想架构的目的之一,
-
JS Ajax请求会话过期处理问题解决方法分析
本文实例讲述了JS Ajax请求会话过期处理问题解决方法.分享给大家供大家参考,具体如下: 对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码.原因在于Ajax请求是XMLHTTPRequest对象发起的而不是浏览器,而服务器返回的信息接收者也是XMLHTTPRequest,非浏览器. 解决办法: 服务器端 可在返回的ResponseHeader里添
-
防止Layui form表单重复提交的实现方法
在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是: 在<form>里面,加上 lay-filter="formConfig" , οnsubmit="return false" , 其中 "formConfig" 为自定义,然后在 提交的按钮事件内: form.on("submit(formConfig)",function(data){
-
用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response
-
原生js jquery ajax请求以及jsonp的调用方法
ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.
-
.NET的Ajax请求数据提交实例
本文实例讲述了.NET的Ajax请求数据提交实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <head runat="server"> <title>ajax请求</title> <link type
-
浅谈Vue.js应用的四种AJAX请求数据模式
如果您闲的没事干去两个Vue.js开发人员:"在Vue应用中使用AJAX的正确姿势是咋样的?",您将会得到三种或更多的不同回答. Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用.每个都有自己的利弊,应根据要求进行判断.你甚至可以同时使用几个! 在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置: 1.根实例 2.组件Components 3.Vuex actions 4.路线导航卫士 5.另加:奖金模式 我将解释每个方法,举一
随机推荐
- spring mvc4.1.6 spring4.1.6 hibernate4.3.11 mysql5.5.25开发环境搭建图文教程
- Vue.js组件tree实现无限级树形菜单
- 带左右箭头图片轮播的JS代码
- asp.net 定时间点执行任务的简易解决办法
- JavaScript数组Array对象增加和删除元素方法总结
- php lcg_value与mt_rand生成0~1随机小数的效果对比分析
- JS的参数传递示例介绍
- C++虚函数表实例分析
- 浅析内存对齐与ANSI C中struct型数据的内存布局
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
- EasyUI Pagination 分页的两种做法小结
- jQuery模仿阿里云购买服务器选择购买时间长度的代码
- Apache SSL服务器配置SSL详解
- java 重定义数组的实现方法(与VB的ReDim相像)
- 使用Angular CLI进行Build(构建)和Serve详解
- 对pandas进行数据预处理的实例讲解
- Java基于状态模式实现的文档编辑模式切换功能实例
- Python 变量的创建过程详解
- spring boot 监控处理方案实例详解
- android设置adb自带screenrecord录屏命令