JS Ajax请求如何防止重复提交


Posted in Javascript onJune 13, 2016

好长时间没写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请求如何防止重复提交的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
浅析Ajax语法
Dec 05 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
js实现拖动缓动效果
Jan 13 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
JavaScript判断是否是微信浏览器
Jun 13 #Javascript
JavaScript_object基础入门(必看篇)
Jun 13 #Javascript
js 连续赋值的简单实现
Jun 13 #Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 #Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 #Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
详解JS模块导入导出
2017/12/20 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python验证码识别的方法
2015/07/10 Python
Python对象转JSON字符串的方法
2016/04/27 Python
简单谈谈Python中的闭包
2016/11/30 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
基于Python解密仿射密码
2019/10/21 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
校庆接待方案
2014/03/18 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
关于python类SortedList详解
2021/09/04 Python