为什么多次执行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 
    }); 
});