jQuery如何防止Ajax重復(fù)提交
首先說說防止重復(fù)點(diǎn)擊提交是什么意思。
我們?cè)谠L問有的網(wǎng)站,輸入表單完成以后,單擊提交按鈕進(jìn)行提交以后,提交按鈕就會(huì)變?yōu)榛疑脩舨荒茉賳螕舻诙?,直到重新加載頁面或者跳轉(zhuǎn)。這樣,可以一定程度上防止用戶重復(fù)提交導(dǎo)致應(yīng)用程序上邏輯錯(cuò)誤。
不妨引深來看,它不一定發(fā)生在表單的提交事件上,同樣可以發(fā)生在ajax的異步請(qǐng)求上。有效地在web客戶端采用一定機(jī)制去防止重復(fù)點(diǎn)擊提交,將大大減輕服務(wù)器端壓力。
下面看下代碼關(guān)于jquery ajax防止重復(fù)提交。
** * jquery ajax請(qǐng)求過濾,防止ajax請(qǐng)求重復(fù)發(fā)送,對(duì)ajax發(fā)送錯(cuò)誤時(shí)進(jìn)行統(tǒng)一處理 */ $(function(){ var pendingRequests = {}; // 所有ajax請(qǐng)求的通用前置filter $.ajaxPrefilter(function( options, originalOptions, jqXHR ) { var key = generatePendingRequestKey(options); //請(qǐng)求是否已經(jīng)存在 if(!pendingRequests[key]){ storePendingRequest(key,jqXHR); }else{ //如果ajax請(qǐng)求已經(jīng)存在,下一次相同的請(qǐng)求則取消,防止重復(fù)請(qǐng)求 jqXHR.abort(); } //ajax請(qǐng)求完成時(shí),從臨時(shí)對(duì)象中清除請(qǐng)求對(duì)應(yīng)的數(shù)據(jù) var complete = options.complete; options.complete = function(jqXHR, textStatus) { //延時(shí)1000毫秒刪除請(qǐng)求信息,表示同Key值請(qǐng)求不能在此時(shí)間段內(nèi)重復(fù)提交 setTimeout(function(){ delete pendingRequests[jqXHR.pendingRequestKey]; },1000); if ($.isFunction(complete)) { complete.apply(this, arguments); } }; //統(tǒng)一的錯(cuò)誤處理 var error = options.error; options.error = function(jqXHR, textStatus) { errorHandler(jqXHR, textStatus); if ($.isFunction(error)) { error.apply(this, arguments); } }; }); /** * 當(dāng)ajax請(qǐng)求發(fā)生錯(cuò)誤時(shí),統(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:"請(qǐng)求訪問的地址或內(nèi)容不存在!" }); } function accessDenied(jqXHR){ Component.warningMessageBox({ content:"你無權(quán)進(jìn)行此操作或頁面訪問!" }); } function internalError(jqXHR){ Component.warningMessageBox({ content:"服務(wù)器存在錯(cuò)誤,未能正確處理你的請(qǐng)求!" }); } function timeoutError(jqXHR){ window.location.href=contextPath + "/j_spring_security_logout"; } function otherError(jqXHR, textStatus){ Component.warningMessageBox({ content:"未知錯(cuò)誤,錯(cuò)誤代碼:" + textStatus }); } /** * 將ajax請(qǐng)求存儲(chǔ)到臨時(shí)對(duì)象中,用于根據(jù)key判斷請(qǐng)求是否已經(jīng)存在 */ function storePendingRequest(key, jqXHR){ pendingRequests[key] = jqXHR; jqXHR.pendingRequestKey = key; } /** * 根據(jù)ajax請(qǐng)求參數(shù)構(gòu)建一個(gè)臨時(shí)存儲(chǔ)key,此處簡單的使用url作為key, * 不考慮為解決請(qǐng)求類型為get時(shí)相同路徑引起的緩存問題,采用隨機(jī)碼構(gòu)建URL的情況 */ function generatePendingRequestKey(options){ return options.url; } });
以上所述是小編給大家介紹的jquery防止Ajax重復(fù)提交的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js頁面滾動(dòng)時(shí)層智能浮動(dòng)定位實(shí)現(xiàn)(jQuery/MooTools)
關(guān)于層的智能浮動(dòng)效果早在幾年前我就在國外的一些個(gè)人網(wǎng)站的垂直導(dǎo)航上見到了,現(xiàn)在似乎在國內(nèi)一些商業(yè)網(wǎng)站上也屢見此效果2011-08-08jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10jQuery ready方法實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery ready方法實(shí)現(xiàn)原理詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10jQuery實(shí)現(xiàn)簡易的天天愛消除小游戲
貌似最近騰訊手機(jī)游戲天天愛消除挺火的,我也是粉絲之一,最近對(duì)javascript一直比較感興趣然后想用js仿造一個(gè),應(yīng)該不是太難,2015-10-10jqGrid日期格式的判斷示例代碼(開始日期與結(jié)束日期)
jqGrid日期格式的判斷示例代碼(開始日期與結(jié)束日期)。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11zTree樹形菜單交互選項(xiàng)卡效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇zTree樹形菜單交互選項(xiàng)卡效果的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示,能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08