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请求如何防止重复提交的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
相对于很多其他的面向对象语言来说，this代表的就是当前对象。本篇文章通过实例给大家介绍js中的this关键字，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要为大家介绍了JavaScript File API实现文件上传预览，File API将极大地方便 Web 端的文件上传等操作，本文将介绍 File API的概况，并用两个实例展示File API的应用，感兴趣的小伙伴们可以参考一下2016-02-02
本文为大家介绍下使用JS+JSP实现checkBox全选，下面有个不错的示例，感兴趣的朋友可以参考下2014-01-01
下面小编就为大家带来一篇JavaScript判断用户名和密码不能为空的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
javascript设计模式 – 简单工厂模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 简单工厂模式,结合实例形式分析了javascript简单工厂模式基本概念、原理、定义、应用场景及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了如何使用ReactHook和Context实现全局主题切换的功能,通过创建一个Context对象和一个ThemeProvider组件,可以将当前主题存储在Context中,并提供一个切换主题的方法,文中给出了详细的代码示例,需要的朋友可以参考下2025-03-03
使用html、js、css实现的简单易用兼容好的分页，具体的实现如下，感兴趣的朋友可以参考下2013-12-12
在支付宝上我们经常会见到支付宝倒计时功能，倒计时应用非常广泛，下文给大家介绍js制作支付宝倒计时功能，但是里面涉及到，倒计时，弹框，以及字体图的相关知识，感兴趣的朋友一起看看吧2016-10-10
HTML中不支持静态Expando的元素的问题...2007-03-03
这篇文章主要介绍了JS实现数组去重复值的方法,结合实例形式分析了JS通过数组遍历、运算等方法实现去重复值的操作技巧,需要的朋友可以参考下2017-02-02
最新评论