1. 程式人生 > >淺談一下如何避免使用者多次點選造成的多次請求

淺談一下如何避免使用者多次點選造成的多次請求

淺談一下如何避免使用者多次點選造成的多次請求

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

還有很多其他的方式進行防止重複點選提交,如

1> 定義標誌位:

 點選觸發請求後,標誌位為false量;請求(或者包括請求後具體的業務流程處理)後,標誌位為true量。通過標誌位來判斷使用者點選是否具備應有的響應。

2> 解除安裝及過載繫結事件:

   點選觸發請求後,解除安裝點選事件;請求(或者包括請求後具體的業務流程處理)後,重新載入繫結事件。

3> 替換(移除)按鈕DOM

   點選觸發請求後,將按鈕DOM物件替換掉(或者將之移除),自然而然此時不在具備點選事件;請求(或者包括請求後具體的業務流程處理)後,給新的按鈕DOM定義點選事件。

 

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

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

  不妨引深來看,它不一定發生在表單的提交事件上,同樣可以發生在ajax的非同步請求上。有效地在web客戶端採用一定機制去防止重複點選提交,將大大減輕伺服器端壓力。

  那麼,我們就不妨從表單提交及ajax的兩種不同請求的處理過程中,來試試如何防止重複點選提交。

  一、表單提交

  就以登入表單為例,程式碼如下:

<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的請求上,我們又該如何處理呢?

  二、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定義點選事件。

  當然,還有其他的方式進行實現,歡迎各位博友補充。

  三、請求頻度

  相信大家碰到過這樣的業務,我們允許它重複點選(或者其他使用者事件),但是不允許在一定的時間內超過次數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 });

複製程式碼

複製程式碼

  四、總結

  從巨集觀意義上來講,我們需要對每一個按鈕去做”防止重複點選提交“,面對這種情況,我們便可以採用一定策略來對其進行封裝實現(如定義通用按鈕類繫結事件)。

  從具體情況上來講,我們並不需要對每一個按鈕都去做”防止重複點選提交“,僅僅需要對某些可能具有複雜後臺業務邏輯、或者檔案上傳、或者呼叫其他非本工程介面導致網路延遲等等情況需要去做”防止重複點選提交“。與此同時,我們必須要給予使用者友好提示(如文字提示、渲染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);

 

原文地址:https://www.cnblogs.com/luckyXcc/p/5804650.html