AJAX表单正在提交给自己？

我不知道今晚发生了什么，但我似乎无法让AJAX工作。 提交表单时，它会使用URL中的值刷新页面。 我正在使用一个带有提交处理程序的validation插件，但它仍然会刷新。 我之前使用过这种方法并没有遇到任何问题。 看看这里的页面，让我知道你的想法：

http://www.jacobsmits.com/demos/jquery_ajax.html?firstName=&lastName=&email=&message=&contactSubmit=

 
                
 
 
Thanks! I'll get back to you shortly.
 
 
  //This script will handle the email form $(window).load(function() { $('#contact_form').placeholderRX({textColor: '#999', hoverColor: '#FBFBFB', addClass: 'yourFormInputText'}); }); $(".button").click(function() { var dataString = "fname=" + $("#firstName").val(); alert(dataString); $.ajax({ type: "POST", url: "http://www.jacobsmits.com/demos/scripts/contact_form.php", data: dataString, success: function(result) { if(result == "Success"){ alert("Success"); }else{ alert("Fail"); } } }); });  

Answer 1

您需要取消提交按钮的默认行为 （提交表单不是ajax）。
它可以使用事件对象上的preverntDefault()或return false;

  $(".button").click(function(e) { var dataString = "fname=" + $("#firstName").val(); alert(dataString); $.ajax({ type: "POST", url: "http://www.jacobsmits.com/demos/scripts/contact_form.php", data: dataString, success: function(result) { if(result == "Success"){ alert("Success"); }else{ alert("Fail"); } } }); return false; /// <=== that was missing. e.preventDefault(); /// Or this. }); 

有一个提交事件，所以最好听一下这个事件而不是点击按钮：

  $("#contact_form").submit(function(e) { var dataString = "fname=" + $("#firstName").val(); alert(dataString); $.ajax({ type: "POST", url: "http://www.jacobsmits.com/demos/scripts/contact_form.php", data: dataString, success: function(result) { if(result == "Success"){ alert("Success"); }else{ alert("Fail"); } } }); return false; /// <=== that was missing. e.preventDefault(); /// Or this. }); 

Answer 2

您需要取消submit按钮的默认行为

 $(".button").click(function(e) { e.preventDefault(); //rest of your code here var dataString = "fname=" + $("#firstName").val(); alert(dataString); $.ajax({