談談防止重複點擊提交

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

　　咱們在訪問有的網站，輸入表單完成之後，單擊提交按鈕進行提交之後，提交按鈕就會變爲灰色，用戶不能再單擊第二次，直到從新加載頁面或者跳轉。這樣，能夠必定程度上防止用戶重複提交致使應用程序上邏輯錯誤。

　　不妨引深來看，它不必定發生在表單的提交事件上，一樣能夠發生在ajax的異步請求上。有效地在web客戶端採用必定機制去防止重複點擊提交，將大大減輕服務器端壓力。

　　那麼，咱們就不妨從表單提交及ajax的兩種不一樣請求的處理過程當中，來試試如何防止重複點擊提交。

　　1、表單提交

　　就以登陸表單爲例，代碼以下：

<form action="login.do" method="post"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" onclick="this.disabled=true; this.value='登陸中...'; this.form.submit();" value="登陸" /> </form>

　　單擊登陸按鈕進行提交之後，提交按鈕就會變爲灰色，而且給用戶一個友好提示（登陸中...），用戶不能再單擊第二次，直到從新加載頁面或者跳轉。

　　能夠發現，咱們不須要給這個按鈕恢復到能夠再次登陸的狀態，僅僅源於頁面從新進行了加載或者跳轉。

　　可是，針對ajax的請求上，咱們又該如何處理呢？

　　2、ajax請求

 1 (function ($) {  2  3 $('.J-login').click(function () {  4  5 var loginBtn = this;  6  7 //1.先進行表單驗證  8 //......  9 10 //2.讓提交按鈕失效，以實現防止按鈕重複點擊 11 $(loginBtn).attr('disabled', 'disabled'); 12 13 //3.給用戶提供友好狀態提示 14 $(loginBtn).text('登陸中...'); 15 16 //4.異步提交 17  $.ajax({ 18 url: 'login.do', 19 data: $(this).closest('form[name="loginForm"]').serialize(), 20 type: 'post', 21 success: function(msg){ 22 23 if (msg === 'ok') { 24 alert('登陸成功！'); 25 26 //TODO 其餘操做... 27 } else { 28 alert('登陸失敗，請從新登陸！'); 29 30 //5.讓登錄按鈕從新有效 31 $(loginBtn).removeAttr('disabled'); 32  } 33 34  } 35  }); 36 37  }); 38 39 })(jQuery);

　　能夠發現，當登陸失敗後，須要從新讓登陸按鈕具備登陸事件。

　　固然，咱們能夠用一個更加優雅的方式來代替之。

 1 (function ($) {  2  3 $('.J-login').click(function () {  4  5 var loginBtn = this;  6  7 //1.先進行表單驗證  8 //......  9 10 //2.異步提交 11  $.ajax({ 12 url: 'login.do', 13 data: $(this).closest('form[name="loginForm"]').serialize(), 14 type: 'post', 15 beforeSend: function () { 16 //3.讓提交按鈕失效，以實現防止按鈕重複點擊 17 $(loginBtn).attr('disabled', 'disabled'); 18 19 //4.給用戶提供友好狀態提示 20 $(loginBtn).text('登陸中...'); 21  }, 22 complete: function () { 23 //5.讓登錄按鈕從新有效 24 $(loginBtn).removeAttr('disabled'); 25  }, 26 success: function(msg){ 27 28 if (msg === 'ok') { 29 alert('登陸成功！'); 30 31 //TODO 其餘操做... 32 } else { 33 alert('登陸失敗，請從新登陸！'); 34  } 35 36  } 37  }); 38 39  }); 40 41 })(jQuery);

　　在這裏，我僅僅舉了一個最爲簡單的例子，還有不少其餘的方式進行防止重複點擊提交，如

　　1> 定義標誌位：

　　　　點擊觸發請求後，標誌位爲false量；請求（或者包括請求後具體的業務流程處理）後，標誌位爲true量。經過標誌位來判斷用戶點擊是否具有應有的響應。

　　2> 卸載及重載綁定事件：

　　　　點擊觸發請求後，卸載點擊事件；請求（或者包括請求後具體的業務流程處理）後，從新載入綁定事件。

　　3> 替換（移除）按鈕DOM

　　　　點擊觸發請求後，將按鈕DOM對象替換掉（或者將之移除），天然而然此時不在具有點擊事件；請求（或者包括請求後具體的業務流程處理）後，給新的按鈕DOM定義點擊事件。

　　固然，還有其餘的方式進行實現，歡迎各位博友補充。

　　3、請求頻度

　　相信你們碰到過這樣的業務，咱們容許它重複點擊（或者其餘用戶事件），可是不容許在必定的時間內超過次數XX次。這從用戶友好體驗及服務器承受壓力選取了一個折中方案。

　　最合適不過的例子，莫過於關鍵字搜索匹配了。

　　相信你們定然首先想到節流函數了。

 1 var timer = null;  2  3 $(input).keyup(function(){  4  5 var value = $(this).val();  6  7  clearTimeout(timer);  8  9 //若是鍵盤敲擊速度太快，小於100毫秒的話就不會向後臺發請求，可是最後總會進行一次請求的。 10 timer = setTimeout(function() { 11 //觸發請求 12  $.ajax({ 13 url: 'typeahead.do', 14 type: 'get', 15  data: value, 16 success: function () { 17 //顯示匹配結果 18 //...... 19  } 20  }); 21 },100); 22 23 });

　　4、總結

　　從宏觀意義上來說，咱們須要對每個按鈕去作」防止重複點擊提交「，面對這種狀況，咱們即可以採用必定策略來對其進行封裝實現（如定義通用按鈕類綁定事件）。

　　從具體狀況上來說，咱們並不須要對每個按鈕都去作」防止重複點擊提交「，僅僅須要對某些可能具備複雜後臺業務邏輯、或者文件上傳、或者調用其餘非本工程接口致使網絡延遲等等狀況須要去作」防止重複點擊提交「。與此同時，咱們必需要給予用戶友好提示(如文本提示、渲染loading條、顯示文件上傳進度條等等)。二者須要一塊兒來看、一塊兒來作。固然，咱們能夠單獨提取狀態顯示這個實現邏輯。代碼以下——

 1 //全站ajax加載提示  2 (function ($) {  3  4 var str = '<div class="ajax-status" style="display: none;">'  5 +    '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" width="20" height="20" />數據加載中...</div>'  6 +'</div>';  7  8 var dom = $(str).prependTo('body');  9 10 $(document).ajaxStart(function(){ 11 dom.stop(true,false).queue(function(){ 12 $(this).show().dequeue(); 13  }); 14  }); 15 16 $(document).ajaxStop(function(){ 17 dom.queue(function(){ 18 $(this).hide().dequeue(); 19  }); 20  }); 21 22 })(jQuery);

　　總之，」防止重複點擊提交「的應用場景及實現方式有不少，須要根據具體項目狀況具體來定。