Jquery，PHP和Ajax的形式沒有刷新

Question

我嘗試準備簡單的聯繫表單與jquery，ajax和PHP沒有刷新。一切工作正常，除了event.preventDefault();

這是我的文件：

contact_engine.php

<?php 

    $name = $_POST['name']; 
    ... 


    $from = 'from'; 
    $to = 'to'; 
    $subject = 'subject'; 
    $human = '4'; 

    $body = "........."; 

    if ($_POST['submit'] && $human == '4') {     
     if (mail ($to, $subject, $body, $from)) { 
      echo '<p>Thanks</p>'; 
     } else { 
     echo '<p>Error</p>'; 
     } 
    } else if ($_POST['submit'] && $human != '4') { 
    echo '<p>You answered the anti-spam question incorrectly!</p>'; 
    } 
?> 

阿賈克斯/ jQuery的

$('form').on('submit', function(event){ 
    event.preventDefault(); 
    $.ajax('.../contact_engine.php', { 
     type: 'POST', 
     data: $('form').serialize(), 
     success: function(result) { 
     } 
    }); 
}); 

PHP

<form method="post" action="<?php bloginfo('template_directory'); ?>/contact_engine.php">  
     <div class="box"> 
      <input type="text" name="name" class="pola formbg name" placeholder="Name" /> 
      . 
      . 
      . 
      . 

      <p><input id="form-button" type="submit" name="submit" value="Send" /></p> 
      </div> 
      <br style="clear: left;" /> 
    </form> 

當我刪除event.preventDefault();一切都好，我收到來自表單的消息，但網站很清爽，我看到'感謝'的消息。

我用你可能看到的Wordpress。

Answer 1

是的，在這種情況下，爲什麼有一個表單/提交按鈕。 刪除表單並將輸入從提交按鈕更改爲標準按鈕。 將功能放在按鈕上，完成任務。

$('#form-button').on('click', function(event){ 

    $.ajax('.../contact_engine.php', { 
     type: 'POST', 
     data: $('form').serialize(), 
     success: function(result) { 
      //do something with the return code 
     } 
    }); 
}); 

Answer 2

讓表單的ID - 我認爲這個問題是您提交處理程序不點火：

$("#myForm").submit(function(event) {... 

，然後改變你的jQuery閱讀：

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    ... 

見http://api.jquery.com/jquery.post/