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 表格工具集
Apr 25 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
jQuery事件对象总结
Oct 17 Javascript
js实现产品缩略图效果
Mar 10 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
vue组件创建的三种方式小结
Feb 03 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Add a Table to a Word Document
2007/06/15 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
C/C++程序员常见面试题一
2012/12/08 面试题
网上祭英烈活动总结
2015/02/04 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python