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表單提交給自己？

回答

相關問題