首先說說防止重復(fù)點(diǎn)擊提交是什么意思。

我們在訪問有的網(wǎng)站，輸入表單完成以后，單擊提交按鈕進(jìn)行提交以后，提交按鈕就會變?yōu)榛疑?#xff0c;用戶不能再單擊第二次，直到重新加載頁面或者跳轉(zhuǎn)。這樣，可以一定程度上防止用戶重復(fù)提交導(dǎo)致應(yīng)用程序上邏輯錯誤。

不妨引深來看，它不一定發(fā)生在表單的提交事件上，同樣可以發(fā)生在ajax的異步請求上。有效地在web客戶端采用一定機(jī)制去防止重復(fù)點(diǎn)擊提交，將大大減輕服務(wù)器端壓力。

下面看下代碼關(guān)于jquery ajax防止重復(fù)提交。

**

* jquery ajax請求過濾，防止ajax請求重復(fù)發(fā)送，對ajax發(fā)送錯誤時進(jìn)行統(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)一進(jìn)行攔截處理的方法

*/

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)進(jì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時相同路徑引起的緩存問題，采用隨機(jī)碼構(gòu)建URL的情況

*/

function generatePendingRequestKey(options){

return options.url;

}

});

以上所述是小編給大家介紹的jquery防止Ajax重復(fù)提交的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

總結(jié)

以上是生活随笔為你收集整理的php ajax jquery 表单重复提交,jQuery如何防止Ajax重复提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。