爲什麼多次執行Ajax post請求？

Question

這裏是我的代碼：

$(document).ready(function(){ 
      $("#mainbutton").click(function(){ 
       $("#ajaxform").submit(function(e){ 
        var info = $(this).serialize(); 
        $.ajax(
        { 
         url : "userctrl", 
         type: "post", 
         data : info, 
         success:function(data, textStatus, jqXHR) 
         { 
          console.log("success"); 
          $('.valid-error').html(data); 
         }, 
        }); 
        e.preventDefault() 
       }); 
       $("#ajaxform").submit(); //Submit the form 
      }); 
     }); 

和我的HTML

 <form id="ajaxform"> 
     <input type="hidden" name="action" value="submit"/> 
     <input type="text" placeholder="Name" name="name" id="name" /><span></span> 
     <input type="text" placeholder="Surname" name="surname" /><span></span> 
     <input type="text" placeholder="Address" name="address" /><span></span> 
     <p class="valid-error"></p> 
     <input id="mainbutton" class="mainbutton" type="button" value="trial"/> 
     </form> 

執行這一要求多次取決於哪些字段被填滿。如果我填充兩個字段將被執行3次，如果我填充3個字段4次。這並非總是如此，但絕對是我的servlet中的doPost方法被多次調用......我只點擊一次提交按鈕!!!爲什麼？

Answer 1

因爲每次都是單擊該按鈕，您將在窗體中添加更多的submit處理程序。任何時候當你發現自己在之內掛接了另一個事件處理函數中的事件處理函數時，你就要仔細考慮是否真的想要你想做的事（通常不是）。

掛鉤submmit外的click處理程序：

$(document).ready(function() { 
    $("#ajaxform").submit(function(e) { 
     var info = $(this).serialize(); 
     $.ajax({ 
      url: "userctrl", 
      type: "post", 
      data: info, 
      success: function(data, textStatus, jqXHR) { 
       console.log("success"); 
       $('.valid-error').html(data); 
      }, 
     }); 
     e.preventDefault() 
    }); 
    $("#mainbutton").click(function() { 
     $("#ajaxform").submit(); //Submit the form 
    }); 
});