您的位置:首页 > Web前端 > JQuery

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

2015-06-10 20:39 671 查看
重复提交产生情景: 在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重复提交功能结束***********************************/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: