输入类型=“提交”而不是输入类型=“按钮”与AJAX？

Question

我设置了一个AJAX表单，使用<input type="button">并设置了jQuery.click动作。

问题是，由于表单中没有<input type="submit">，表单不会以传统方式提交，因此表单验证程序并不总是有效，而按下回车按钮则什么也不做。

如果我添加一个提交输入，当它被点击（或输入命中等）时，页面将重新加载，就好像它不是AJAX表单一样。

我在这里错过了什么？

Answer 1

使用提交按钮。提交按钮在默认浏览器行为方面更加兼容，例如按下回车键。然后，在提交事件中，只需取消表单提交并运行您的AJAX代码。

<form onsubmit="return false;"> 
<!--Blah Blah Blah--> 
<input type="submit"> 
</form> 

如果你使用jQuery，你可以，如果他重视形成的使用jQuery提交事件中使用了更“干净”的方法

$('#form_id').bind('submit',function(e) { 
    e.preventDefault(); //Will prevent the submit... 
    //Add additional code here 
}); 

Answer 2

而改变形式的submit行为，并保持你的<input type="submit">按钮以及：

$("form").submit(function(e){ 
    e.preventDefault(); 
    // do ajax submition 
    $.ajax({ 
     url: "SomeURL", 
     type: "POST", 
     data: $(this).serializeArray(), 
     success: function(data, status, xhr) { 
      // do the success stuff 
     }, 
     error: function(xhr, status err) { 
      // do the error stuff 
     } 
    }); 
}); 

优势：好消息是，这将适用于所有情况，当你打任何形式的输入ENTER元素或点击提交按钮。它会一直工作，毫无例外。