前台限制ajax重复提交(利用jquery ajaxPrefilter实现)

前端之家收集整理的这篇文章主要介绍了前台限制ajax重复提交(利用jquery ajaxPrefilter实现)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

重复提交产生情景: 在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重复提交功能结束***********************************/



猜你在找的Ajax相关文章