JS Ajax请求如何防止重复提交
更新时间：2016年06月13日 09:43:53 投稿：mrr
这篇文章主要介绍了JS Ajax请求如何防止重复提交的相关资料，通过覆盖掉$.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请求如何防止重复提交的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Javascript实现div层渐隐效果的方法,涉及javascript操作页面元素与样式变化的相关技巧,需要的朋友可以参考下2015-05-05
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类 似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以 通过touch event handler的event对象取到2015-04-04
这篇文章主要介绍了JS原型和原型链原理与用法,结合实例形式详细分析了js原型和原型链概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了微信小程序重写tabbar底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
avalon是一个简单易用迷你的MVVM框架。通过本文给大家介绍Avalon中文长字符截取、关键字符隐藏、自定义过滤器的相关资料，需要的朋友一起学习吧2016-05-05
这篇文章主要介绍了js将当前日期或指定日期转时间戳超详细,通过实例代码介绍了JS时间戳转换方式，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了ES6概念 Symbol.keyFor()方法 ,需要的朋友可以参考下2016-12-12
javascript使用switch case实现动态改变超级链接文字及地址
这篇文章主要介绍了javascript使用switch case实现动态改变超级链接文字及地址,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
本文为大家详细介绍下通过JS实现可改变列宽的table，具体的思路及代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论