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>';
    }
?>

Ajax/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/