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