DIV CSS 佈局教程網

web前端數據請求或者表單提交往往通過對dom的點擊事件來操作，但是往往因為認為點擊過快（少年手速挺快的嘛），或者因為響應等待使得用戶誤人為沒操作而重復很多次點擊，造成表單數據的連續重復提交，造成用戶體檢的不好，甚至影響到整個系統的安全性。而前端的防治重復提交至少很有效的防治了人為正常操作下的很多不必要麻煩。下面就來講講如何有效避免前端的表單重復提交

表單提交有以下幾種方式：

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>

另外，還有一種常用的方法是使用圖片：

代碼如下:

<form name=”form” method=”post” action=”# "> 
<input type=”image” name=”submit” src=”btnSubmit.jpg”> 
</form>

第三種是使用鏈接來提交表單，用到了javascript的DOM模型：

代碼如下:

<form name=”form” method=”post” action=”#”> 
<a href=”javascript:form.submit();”>提交</a> 
</form>

實際上這一種是通過js 進行提交。可以理解成　

$("form").find("a").click(function(){
$("form").submit();
　　});

第一種和第二種可以用js來：

$("input[type='submit']").click(function(){
　　　　$("form").submit();
　　});
$("input[name='submit']").click(function(){
　　　　$("form").submit();
　　});

總之，都是對form進行提交,當然還有出了表單提交還有些請求也要防治重復，比如響應某個事件的ajax請求（提交數據）

$.ajax({
url: url,
type: "post",
data: data,
success: function (data) {
callback;
}
});

那麼前面這些提交和請求在網絡和性能因素上導致不能及時網絡響應並且在事件多次響應時造成的重復，除非在提交響應完成前的點擊（觸發事件）視為無效，等當前響應完了再去響應下一個請求

如果是表單按鈕我們可以這樣在點擊後將按鈕disabled掉

$("input[type='submit']").click(function(){
$(this).attr("disabled",　true);
　$("form").submit();
});

按道理來說，將點擊後將按鈕disabled設為true時按鈕就不能點擊了那麼第二次以後點擊就無效了，但這樣做你會發現同時第一次點擊的表單也無法正常提交了（好像是h5的標准後才不行的，無論怎樣h5標准的浏覽器我試了試都不行），看來是disabled影響了表單的提交，那麼先提交後disabled看行不行

$("input[type='submit']").click(function(){
　$("form").submit();
$(this).attr("disabled",　true);
});

實驗結果 ，這樣也不行，我們不能猜想submit（）回調在click函數最後執行並且.submit()函數內部應該對disabel做了判斷（假設這是浏覽器內部機制原理），反正在當前這個交互周期裡disabled了就不能submit

那麼我們可以拋開disabled用代碼邏輯來防治重復

$("input[type='submit']").click(function(){
if(!$(this)[0].repeat){
$(this)[0].repeat=true;
$（"form").submit();
}
});

在當前點擊的按鈕如果沒有repeat的話就進入提交並且設置個值為true的repeat屬性，當第二次進來的時候發現有這個屬性就不提交，看似這樣的邏輯會防治重復提交了，但是事實永遠都是殘酷的！

是的，當點擊過快的時候還是會重復提交，這是因為，如果click裡沒執行submit的時候html默認的type＝submit 的input點擊操作會提交表單，舉個完整的例子

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>
<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>
$("input[type='submit']").click(function(){
console.log("here is click too!");
});
<form name=”form” method=”post” action=”#"> 
<div>提交</div> 
</form>
$("form").find("div").click(function(){
　　$("form").submit();
});

這三個代碼都是一個效果提交表單，但是！！！！！！！！！！我們發現阻止表單提交的不就是在當前交互周期（一次點擊－》響應－》回調）裡，將submit按鈕disabled掉嗎，好的，少年上代碼

$("form").find("div").click(function(){
if(!$(this)[0].repeat){ 
　　 $(this)[0].repeat=true;
　　$(this).closest("form").submit();
}else{
　　 $(this).attr("disabled",　true); }
});

看到沒有，第二次點擊的時候就disabeld掉了，所以只有第一次成功，第二次的就不會提交了！

當然，如果是其他dom元素防治重復點擊那就更簡單了

$("div").click(function(){
　　if(!!$(this)[0].isRepeat){
　　　　return;
　　}
$(this)[0].isRepeat=1;
　　 　$.ajax({
url: url,
type: "post",
data: data,
success: function (data) {
　　　　　　　　$(this)[0].isRepeat＝0；
　　　　　　　　callback; 
　　　　　　} 
　 }); 
});

因為submit（）會刷新試圖，而ajax不會，所以在回調後需要把判斷重復的那個屬性賦值為false

這是不是就更簡單？我想你會這樣認為的！

以上所述是小編給大家介紹的JS WEB 前端開發中防治重復提交的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！