jQuery如何防止Ajax重復(fù)提交
首先說說防止重復(fù)點擊提交是什么意思。
我們在訪問有的網(wǎng)站,輸入表單完成以后,單擊提交按鈕進行提交以后,提交按鈕就會變?yōu)榛疑脩舨荒茉賳螕舻诙?,直到重新加載頁面或者跳轉(zhuǎn)。這樣,可以一定程度上防止用戶重復(fù)提交導(dǎo)致應(yīng)用程序上邏輯錯誤。
不妨引深來看,它不一定發(fā)生在表單的提交事件上,同樣可以發(fā)生在ajax的異步請求上。有效地在web客戶端采用一定機制去防止重復(fù)點擊提交,將大大減輕服務(wù)器端壓力。
下面看下代碼關(guān)于jquery ajax防止重復(fù)提交。
**
* jquery ajax請求過濾,防止ajax請求重復(fù)發(fā)送,對ajax發(fā)送錯誤時進行統(tǒng)一處理
*/
$(function(){
var pendingRequests = {};
// 所有ajax請求的通用前置filter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = generatePendingRequestKey(options);
//請求是否已經(jīng)存在
if(!pendingRequests[key]){
storePendingRequest(key,jqXHR);
}else{
//如果ajax請求已經(jīng)存在,下一次相同的請求則取消,防止重復(fù)請求
jqXHR.abort();
}
//ajax請求完成時,從臨時對象中清除請求對應(yīng)的數(shù)據(jù)
var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
//延時1000毫秒刪除請求信息,表示同Key值請求不能在此時間段內(nèi)重復(fù)提交
setTimeout(function(){
delete pendingRequests[jqXHR.pendingRequestKey];
},1000);
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
//統(tǒng)一的錯誤處理
var error = options.error;
options.error = function(jqXHR, textStatus) {
errorHandler(jqXHR, textStatus);
if ($.isFunction(error)) {
error.apply(this, arguments);
}
};
});
/**
* 當(dāng)ajax請求發(fā)生錯誤時,統(tǒng)一進行攔截處理的方法
*/
function errorHandler(jqXHR, textStatus){
switch (jqXHR.status){
case(500):
internalError(jqXHR);
break;
case(403):
accessDenied(jqXHR);
break;
case(408):
timeoutError(jqXHR);
break;
case(404):
pageNotFound(jqXHR);
break;
default:
//otherError(jqXHR, textStatus);
}
}
function pageNotFound(jqXHR){
Component.warningMessageBox({
content:"請求訪問的地址或內(nèi)容不存在!"
});
}
function accessDenied(jqXHR){
Component.warningMessageBox({
content:"你無權(quán)進行此操作或頁面訪問!"
});
}
function internalError(jqXHR){
Component.warningMessageBox({
content:"服務(wù)器存在錯誤,未能正確處理你的請求!"
});
}
function timeoutError(jqXHR){
window.location.href=contextPath + "/j_spring_security_logout";
}
function otherError(jqXHR, textStatus){
Component.warningMessageBox({
content:"未知錯誤,錯誤代碼:" + textStatus
});
}
/**
* 將ajax請求存儲到臨時對象中,用于根據(jù)key判斷請求是否已經(jīng)存在
*/
function storePendingRequest(key, jqXHR){
pendingRequests[key] = jqXHR;
jqXHR.pendingRequestKey = key;
}
/**
* 根據(jù)ajax請求參數(shù)構(gòu)建一個臨時存儲key,此處簡單的使用url作為key,
* 不考慮為解決請求類型為get時相同路徑引起的緩存問題,采用隨機碼構(gòu)建URL的情況
*/
function generatePendingRequestKey(options){
return options.url;
}
});
以上所述是小編給大家介紹的jquery防止Ajax重復(fù)提交的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)硪黄獪\談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便,常遇到的一個問題就是刪除一行后頁面必須進行更新,下面與大家分享下使用Ajax的解決方法2013-05-05
通過jquery 獲取URL參數(shù)并進行轉(zhuǎn)碼
本節(jié)主要介紹了通過jquery 獲取URL參數(shù)并進行轉(zhuǎn)碼,需要的朋友可以參考下2014-08-08
原生js實現(xiàn)addclass,removeclass,toggleclasss實例
下面小編就為大家?guī)硪黄鷍s實現(xiàn)addclass,removeclass,toggleclasss實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起 小編過來看看吧2016-11-11
jQuery實現(xiàn)的給圖片點贊+1動畫效果(附在線演示及demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)的給圖片點贊+1動畫效果,并附帶在線演示及demo源碼下載,涉及jQuery鼠標事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2015-12-12
使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法,需要的朋友可以參考下2015-10-10

