AJAX表单提交给自己？

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

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

<div class="demo_content" style="display:none"> 
    <form id="contact_form"> 
     <span class="inputSpan"> 
      <input value="" class="input input1" title="First name" id="firstName" name="firstName" type="text" /> 
     </span> 
     <span class="inputSpan"> 
      <input value="" class="input input2" title="Last name" id="lastName" name="lastName" type="text" /> 
     </span> 
     <span class="inputSpan"> 
      <input value="" class="input input2" title="Email" id="email" name="email" type="text" /> 
     </span> 
     <span class="inputSpan"> 
      <textarea type="text" id="message" name="message" title="Message" class="input textArea" ></textarea> 
     </span> 

     <span class="inputSpan"> 
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
     </span> 
     <div id="contact_ajax_wrap"> 
      <div id="contact_ajax_gif" style="display:none;"><img src="http://www.jacobsmits.com/images/main/ajax-loader-black.gif" width="32" height="32" /></div> 
      <div id="contact_ajax_success" style="display:none">Thanks! I'll get back to you shortly.</div> 
     </div> 
    </form> 

<script type="text/javascript"> 
    //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"); 
       } 
      } 
     }); 
    }); 
</script>

来源

2012-02-13 Throttlehead

你可以张贴代码负责表单提交 – Rafay 2012-02-13 04:26:55

即使这个非常基本的实现导致页面刷新。它从来没有得到警报：成功。现在的PHP脚本也只是输出成功。 – Throttlehead 2012-02-13 04:54:07

我非常接近制作一个看起来像一个按钮的div。 – Throttlehead 2012-02-13 04:56:57

您需要取消提交按钮的默认行为（提交表单不是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. 
    });

来源

2012-02-13 05:08:44 gdoron

非常感谢！你是一个拯救生命的人。这让我疯狂。 – Throttlehead 2012-02-13 05:30:31

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

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

来源

2012-02-13 05:03:31 Rafay

AJAX表单提交给自己？

回答

相关问题