前台限制ajax重复提交（利用jquery ajaxPrefilter实现）_$.ajaxprefilter options.success-优快云博客

本文链接：https://blog.youkuaiyun.com/wangjun5159/article/details/46446361

本文介绍了一种通过维护请求队列来防止使用jQuery发起的Ajax请求重复提交的方法。该方案适用于同步和异步请求，能够有效避免因用户多次点击而产生的重复操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重复提交产生情景：在ajax请求情况下，无论阻塞或者非阻塞（同步或者异步），点击多次按钮，会产生多次ajax请求，重复提交。

实现思路：在全局作用域中，维护队列，ajax请求前，将request加入到队列中，在服务器端产生响应后，从队列中清除，如果在这个期间，接收到第二次同样的请求，就将后续请求停止（abort）掉。

局限性：仅仅是前台防止jquery的ajax请求。对于非jquery的ajax请求，不起作用。因为使用的是jquery的ajaxPreFilter函数，仅仅对jquery的ajax请求有作用。

实现代码如下：

/*****************************************************************************
*防止ajax重复提交的代码，
*核心思想是维护一个队列，发送请求时，将请求加入队列，请求响应后，从队列中清除，这就保证了在任一时刻只能
*有一个同样的请求发送，后续请求全部abort，
/*****************************************************************************/

</pre><pre name="code" class="html">//request array
var pendingRequests = {};


function generatePendingRequestKey(options){
return options.url;
}
function  storePendingRequest(key,jqXHR){
pendingRequests[key]=jqXHR;
jqXHR.pendingRequestKey = key;
}




$.ajaxPrefilter(function(options, originalOptions, jqXHR ) {
 
    //不重复发送相同请求
    var key = generatePendingRequestKey(options);
    if (!pendingRequests[key]) {
    storePendingRequest(key, jqXHR);
    } else {
    // or do other
    jqXHR.abort();
    }
    


var success = options.success;
options.success = function(jqXHR, textStatus) {
if ($.isFunction(success)) {
success.apply(this, arguments);
}
};


var error = options.error;
options.error = function(jqXHR, textStatus) {
if ($.isFunction(error)) {
error.apply(this, arguments);
}
};

//complete最后执行，所以清除request放在此方法中
var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
// clear from pending requests
pendingRequests[jqXHR.pendingRequestKey] = null;
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});
/*****************防止ajax重复提交功能结束***********************************/