使用preventDefault提交Ajax表单

我有一个普通的HTML表单，它应该阻止默认表单提交并通过Ajax发布值。 它无法使用我的设置请帮助我出错的地方。 在Jquery，javascrip看到我作为新手

        $(function(){ $("select").multiselect({ selectedList: 4 }); });   var frm = $('#contactForm1'); frm.submit(function (ev) { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert('ok'); } }); ev.preventDefault(); }); 

我的表格看起来像

 
 
  Option 1 Option 2 Option 3 Option 4  
  
   

Answer 1

将您的代码包装在DOM Ready中

 $(function () { var frm = $('#contactForm1'); frm.submit(function (ev) { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert('ok'); } }); ev.preventDefault(); }); }); 

Answer 2

 $('#submit').click(function(e){ //call ajax e.preventDefault(); }) 

Answer 3

即使使用preventDefault() ，您提交表单时页面是否会刷新？

1. 在表单上，​​将#放在action属性中并删除method 。

2. 修改你的JS代码

   var frm = $('#contactForm1'); frm.submit(function (ev) { ev.preventDefault(); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert('ok'); } }); });

在你的ajax开火之前把preventDefault 。 您的代码发生了什么，您的表单正在使用HTML提供的操作和方法执行，因此您的JS无法捕获它。

Answer 4

将提交按钮设置为type="button"而不是type="submit" ，

让我们说提交按钮有id submit-button 。 你可以用这样的javascript提交表单：

 $("#submit-button").click(function(){ //send ajax })