jQuery實現的簡單前端搜索功能示例
704
2024-02-04
首先說說防止重復點擊提交是什么意思。
我們在訪問有的網站,輸入表單完成以后,單擊提交按鈕進行提交以后,提交按鈕就會變為灰色,用戶不能再單擊第二次,直到重新加載頁面或者跳轉。這樣,可以一定程度上防止用戶重復提交導致應用程序上邏輯錯誤。
不妨引深來看,它不一定發生在表單的提交事件上,同樣可以發生在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重復提交的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持!
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!