如何使用 jQuery AJAX 电子邮件表单获得“成功”

Question

我在网站上创建了一个简单的电子邮件表单 - 使用 jQuery 库通过 AJAX 处理它。

我知道该表单正在工作，因为我正在接收测试电子邮件，但我需要让用户知道他们的电子邮件已发送。目前，成功后不会发生任何事件。它应该用成功消息替换表单（在 div #contactform 中）。我在这里缺少什么？

注意：我在提交表单后查看了 Safari 中的活动，它显示了我的 process.php 脚本，但它显示“已取消”。为什么要这样做，这可能与它为什么没有显示成功消息有关吗？

这是我的脚本：

HTML

<div id="contactform">
    <form id="churchcontact" action="" method="POST">

        <ul>
            <li>
                <label for="name">Name</label>
                <span class="error error_name">Please enter your name</span>
                <input id="name" type="text" name="name" />
            </li>

            <li>
                <label for="email">Email</label>
                <span class="error error_email">Please enter your email address</span>
                <input id="email" type="text" name="email" />
            </li>

            <li>
                <label for="message">Message</label>
                <span class="error error_message">Please write a message</span>
                <textarea id="message" name="message"></textarea>
            </li>

            <li>
                <input class="formsubmit" type="submit" value="Send" />
            <li>
        </ul>

    </form>
    </div>

jQUERY

$(document).ready(function() {


    ////////////////////////////////////
    //// form submit                ////
    ////////////////////////////////////
    $('#churchcontact').submit(function() {


        ////////////////////////////////////
        //// validation                 ////
        ////////////////////////////////////
        $('.error').hide();

        //message
        var message = $('textarea#message').val();
        if(message == '') {
            $('.error_message').show();
            $('textarea#message').focus();
            var errors = 'true';
        }


        //email
        var email = $('input#email').val();
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length || email == '') {
            $('.error_email').show();
            $('input#email').focus();
            var errors = 'true';
        }

        //name
        var name = $('input#name').val();
        if(name == '') {
            $('.error_name').show();
            $('input#name').focus();
            var errors = 'true';
        }




        if(errors) {
            return false;
        } else {


            ////////////////////////////////////
            //// process                    ////
            ////////////////////////////////////

            var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
            //alert (dataString);return false;
            $.ajax({
                type: "POST",
                url: "sites/all/modules/custom/churchcontact/process.php",
                data: dataString,
                success: function() {
                    $('#contactform').html("success!");
                }
            });



        }

        return false;

    });



});

PHP (process.php)

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['message'];


$recipient = '[my email]';
$subject = 'Website Test';

$message = '
Name: ' . $name
. ', Email: ' . $email
. ', Message: ' . $msg;


mail($recipient, $subject, $message, $headers);

Answer 1

在 process.php 中添加 echo 的 mail():

$res = mail($recipient, $subject, $message, $headers);
echo $res;        //if $res returns 1 that means mail was sent

ajaxsuccess:

...
success: function(data) {
    if(data == 1){
        message = "success!";
    }
    else{
        message = "Error";
    }    
    $('#contactform').empty().html(message);
   }