jQuery如何防止Ajax重複提交_jquery

首先說說防止重複點擊提交是什麼意思。

　　我們在訪問有的網站，輸入表單完成以後，單擊提交按鈕進行提交以後，提交按鈕就會變為灰色，使用者不能再單擊第二次，直到重新載入頁面或者跳轉。這樣，可以一定程度上防止使用者重複提交導致應用程式上邏輯錯誤。

　　不妨引深來看，它不一定發生在表單的提交事件上，同樣可以發生在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重複提交的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！