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


How to get "success" with jQuery AJAX email form

我在一个网站上创建了一个简单的电子邮件表单-使用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);

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

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

ajax success:

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