Ajax調用不會通過 - 表單總是通過php提交

Question

我有一個表單默認情況下正在使用php uri_request提交。 現在我試圖添加一個AJAX調用提交表單，但它仍然用PHP提交 AJAX調用提交表單是：

$(document).ready(function() { 
    $("#contactform").submit(function(e) { 
     e.preventDefault(); 
    }); 
    $.ajax({ 
     cache: false, 
     type: 'POST', 
     data: ("#contactform").serialize(), 
     url: 'formfiles/submit.php', 
     // for ajax the submit.php is on a    
     success: function() { 
      // separate page 
      $('#contactform').fadeOut(200).submit(); 
      $('#success').delay(200).fadeIn(200); 
     } 
    }); 
    return false; 

}); 

和HTML表單屬性是：

<form action="#n" class="active" method="post" name="contactform" id="contactform"> 

另外，

e.preventDefault 

在Ajax調用將無法正常工作的開始，但沒有AJAX它的工作（只是防止默認！）

代碼有什麼問題？爲什麼它不起作用？

預先感謝任何幫助

編輯下面是HTML {放在一個包含文件（孔位是一個PHP動態結構）}

<form action="#n" class="active" method="post" name="contactform" id="contactform"> 

<div class="column"> 
    <div class="obb" style="<?php echo $color[11];?>"> 
        All fields are mandatory 
        </div> 
     <div > 
<label style="<?php echo $color[0]; ?>"> Name:</label> 
    <input class="con_campo required" name="name" value="" id="name" type="text" /> 

     </div> 
     <div > 
      <label style=""><?php echo $color[8]; ?>&nbsp;</label>              

    </div> 
<div class="fieldcontent prod" id="pr"> 
        <label style="">&nbsp;<?php echo $color[2]; ?></label> 
<select name="prod" value="" id="products" class="selectx required"> 
    <option value=""> -- Select -- </option> 
    <option value="1"> ITA</option> 
<option value="2">DE</option> 
<option value="3"> FR</option> 
<option value="4">EN</option> 

    </select> 

       </div> 
      <div class="fieldcontent prod" id="in"> 
       <label style="<?php echo $color[4]; ?>"> Address:</label> 
<input name="address" value="" id="address" class="required" type="text"  /> 

         </div> 
         <div class="fieldcontent prod" id="ci"> 
         <label style="<?php echo $color[6]; ?>"> City:</label> 
    <input name="city" value="" id="city" class="con_campo required" type="text" /> 

         </div> 
         <div class="fieldcontent info help" id="me" > 
          <label style="<?php echo $color[10]; ?>">Message:</label> 
<textarea id="message" name="message" value="" class="cs_comment required" ></textarea> 

         </div> 
         <div id="code" style="margin-bottom:25px;"> 
    <label style="<?php echo $color[11]; ?>; width:340px;"></label> 
<input type="text" name="code" class="chapta" size="10" maxlength="7" id="code"/> 

         </div> 
      </div> 
<div class="column" > 
       <div class="obb">&nbsp;</div> 
<div class="fieldcontent prod" id="co"> 
    <label style="<?php echo $color[1]; ?>">Surname:</label> 
<input name="surname" value="" id="surname" class=" required" type="text"/> 

      </div> 
      <div > 
<label style="<?php echo $color[9]; ?>">Email: </label> 
<input name="email" value="" id="email" class=" required email" type="text" /> 

</div> 
<div class="fieldcontent help prod" id="do"> 
<label style="<?php echo $color[3]; ?>">Domain:</label> 
      <span style="font-size:20px; margin-left:30px;"> http://</span> 
<input name="domain" id="domain" class=" required" type="text" value="" /> 

      </div> 
         <div class="fieldcontent prod" id="re"> 
    <label style="<?php echo $color[5]; ?>">Region:</label> 
    <input name="region" value="" id="region" class=" required" type="text" /> 

         </div> 
       <div class="fieldcontent prod" id="pa"> 
<label style="<?php echo $color[7]; ?>" >State:</label> 
<input name="state" value="" id="state" class="con_campo required" type="text" /> 

         </div> 
        </div> 

        <div> 
     <div class="bottom"> 

<input type="submit" id="submitButton" name="submit" value="submit" /> 
         &nbsp;<br /><br /><br />&nbsp; 

     </div> 
       </form> 
</div></div> 

<script> 
$(document).ready(function() { 
$("#contactform").submit(function(e){ 
    $.ajax({ 
     cache: false, 
     type: 'POST', 
     data: $("#contactform").serialize(), 
     url : 'formfiles/submit.php', // for ajax the submit.php is on a    
     success: function() {   // separate page 
      $('#contactform').fadeOut(200).submit(); 
      $('#success').delay(200).fadeIn(200); 
     } 
    }); 
    }); 
}); 

Answer 1

你可以重構您的代碼以解決問題，如下所示。你不需要return false;，因爲e.preventDefault();會照顧它。

$(document).ready(function() { 

    $("#contactform").submit(function (e) { 

     e.preventDefault(); 

     $.ajax({ 
      cache: false, 
      type: 'POST', 
      data: $("#contactform").serialize(), //note that $ mark is added 
      url: 'formfiles/submit.php', // for ajax the submit.php is on a    
      success: function() { // separate page 
       $('#contactform').fadeOut(200).submit(); 
       $('#success').delay(200).fadeIn(200); 
      } 
     }); 

    }); 


}); 

Answer 2

您在行data: ("#contactform").serialize()中的ajax調用發生錯誤。它應該是data: $("#contactform").serialize()

試試這個：

$(document).ready(function() { 
    $("#contactform").submit(function(e){ 
     $.ajax({ 
      cache: false, 
      type: 'POST', 
      data: $("#contactform").serialize(), 
      url : 'formfiles/submit.php', // for ajax the submit.php is on a    
      success: function() {   // separate page 
       $('#contactform').fadeOut(200).submit(); 
       $('#success').delay(200).fadeIn(200); 
      }, 
      error: function(error_response){ 
       console.log(error_response); 
      } 
     }); 
    }); 
}); 

更新：

我看到你的代碼的一些問題。

1. 是否需要加載所需的jQuery庫？我沒有看到你粘貼的HTML。希望你已經將它包含在標題中。
2. 添加e.preventDefault();以防止窗體的默認操作，因爲輸入類型爲submit。如果你不把那個表單默認提交方法。

3. 我沒有看到script標記已關閉。您應該關閉script標記，否則它將無法工作。請參閱更新的代碼如下：

   <script type="text/javascript"> 
       $(document).ready(function() { 
       $("#contactform").submit(function(e){ 
        e.preventDefault(); 
        $.ajax({ 
         cache: false, 
         type: 'POST', 
         data: $("#contactform").serialize(), 
         url : 'formfiles/submit.php', // for ajax the submit.php is on a    
         success: function() {   // separate page 
          $('#contactform').fadeOut(200).submit(); 
          $('#success').delay(200).fadeIn(200); 
         } 
        }); 
       }); 
       }); 
   </script> 
   

新更新

這裏你的Ajax調用返回的數據。所以服務器不知道這個通話是否成功，它會一直進入成功功能。所以你必須檢查響應是否成功。從PHP頁面返回一些字符串，如success，以顯示驗證或表單提交及其處理是否成功或返回錯誤。同樣，在成功回調中，您再次提交表單，因此這將繼續作爲永無止境的循環。

請以下修改：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#contactform").submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      cache: false, 
      type: 'POST', 
      data: $("#contactform").serialize(), 
      url : 'formfiles/submit.php', // for ajax the submit.php is on a    
      success: function(response) {   // separate page 
       if (response == 'success') { 
        //write what you want to do on success 
        $('#success').delay(200).fadeIn(200); 
       } else { 
        //show error 
       } 
      } 
     }); 
    }); 
    }); 
</script> 

希望這有助於