web前端防治重復提交

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

<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

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

web前端防治重復提交

web前端開發中防治重復提交

免責聲明！