首先說說防止重復點擊提交是什麼意思。
我們在訪問有的網站，輸入表單完成以後，單擊提交按鈕進行提交以後，提交按鈕就會變為灰色，用戶不能再單擊第二次，直到重新加載頁面或者跳轉。這樣，可以一定程度上防止用戶重復提交導致應用程序上邏輯錯誤。
不妨引深來看，它不一定發生在表單的提交事件上，同樣可以發生在ajax的異步請求上。有效地在web客戶端采用一定機制去防止重復點擊提交，將大大減輕服務器端壓力。
下面看下代碼關於jquery ajax防止重復提交。
**
* jquery ajax請求過濾，防止ajax請求重復發送，對ajax發送錯誤時進行統一處理
*/
$(function(){
var pendingRequests = {};
// 所有ajax請求的通用前置filter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = generatePendingRequestKey(options);
//請求是否已經存在
if(!pendingRequests[key]){
storePendingRequest(key,jqXHR);
}else{
//如果ajax請求已經存在，下一次相同的請求則取消，防止重復請求
jqXHR.abort();
}
//ajax請求完成時，從臨時對象中清除請求對應的數據
var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
//延時1000毫秒刪除請求信息，表示同Key值請求不能在此時間段內重復提交
setTimeout(function(){
delete pendingRequests[jqXHR.pendingRequestKey];
},1000);
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
//統一的錯誤處理
var error = options.error;
options.error = function(jqXHR, textStatus) {
errorHandler(jqXHR, textStatus);
if ($.isFunction(error)) {
error.apply(this, arguments);
}
};
});
/**
* 當ajax請求發生錯誤時，統一進行攔截處理的方法
*/
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:"請求訪問的地址或內容不存在！"
});
}
function accessDenied(jqXHR){
Component.warningMessageBox({
content:"你無權進行此操作或頁面訪問！"
});
}
function internalError(jqXHR){
Component.warningMessageBox({
content:"服務器存在錯誤，未能正確處理你的請求！"
});
}
function timeoutError(jqXHR){
window.location.href=contextPath + "/j_spring_security_logout";
}
function otherError(jqXHR, textStatus){
Component.warningMessageBox({
content:"未知錯誤，錯誤代碼：" + textStatus
});
}
/**
* 將ajax請求存儲到臨時對象中，用於根據key判斷請求是否已經存在
*/
function storePendingRequest(key, jqXHR){
pendingRequests[key] = jqXHR;
jqXHR.pendingRequestKey = key;
}
/**
* 根據ajax請求參數構建一個臨時存儲key,此處簡單的使用url作為key，
* 不考慮為解決請求類型為get時相同路徑引起的緩存問題，采用隨機碼構建URL的情況
*/
function generatePendingRequestKey(options){
return options.url;
}
});
以上所述是小編給大家介紹的jquery防止Ajax重復提交的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！