談談防止Ajax重複點選提交

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

不妨引深來看，它不一定發生在表單的提交事件上，同樣可以發生在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
($)  else
3334}35
});36
37});
3839 })(jquery);

可以發現，當登入失敗後，需要重新讓登入按鈕具有登入事件。

當然，我們可以用乙個更加優雅的方式來代替之。

1 (function
($) ,
22             complete: function
() ,
26             success: function
(msg) else
3536}37
});38
39});
4041 })(jquery);

在這裡，我僅僅舉了乙個最為簡單的例子，還有很多其他的方式進行防止重複點選提交，如

1> 定義標誌位：

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

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

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

3> 替換（移除）按鈕dom

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

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

三、請求頻度

相信大家碰到過這樣的業務，我們允許它重複點選（或者其他使用者事件），但是不允許在一定的時間內超過次數xx次。這從使用者友好體驗及伺服器承受壓力選取了乙個折中方案。

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

相信大家定然首先想到節流函式了。

1
var timer = null;2
3 $(input).keyup(function
()20
});21     },100);
2223 });

四、總結

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

從具體情況上來講，我們並不需要對每乙個按鈕都去做」防止重複點選提交「，僅僅需要對某些可能具有複雜後台業務邏輯、或者檔案上傳、或者呼叫其他非本工程介面導致網路延遲等等情況需要去做」防止重複點選提交「。與此同時，我們必須要給予使用者友好提示(如文字提示、渲染loading條、顯示檔案上傳進度條等等)。兩者需要一起來看、一起來做。當然，我們可以單獨提取狀態顯示這個實現邏輯。**如下——

1
//全站ajax載入提示
2 (function
($) );
14});
1516     $(document).ajaxstop(function
());
20});
2122 })(jquery);

總之，」防止重複點選提交「的應用場景及實現方式有很多，需要根據具體專案情況具體來定。

談談防止Ajax重複點選提交

防止重複點選

防止重複提交

防止重複提交

談談防止Ajax重複點選提交

防止重複點選

防止重複提交

防止重複提交

相關推薦