javascript - 使用 Ajax/jQuery/PHP 发送联系表单数据

Question

我有一个有效的联系表单，但决定尝试学习一点 Ajax 来提高可用性和错误检查。我正在使用此 example 中的代码我对其进行了稍微调整以适应新的 .ajaxComplete() 准则。

我不知道为什么这不起作用，但我将提供我的表单、ajax 请求和工作示例，希望有人可以提供帮助:

My website

JS

$(document).ready(function() {

    $("#get-contact-form").submit(function() {

    var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "contact-process.php",
            data: str,
            success: function(msg) {

                $(document).ajaxComplete(function(event, request, settings) {

                if (msg == 'OK') {

                    result = '<div class="notification_ok">Your message has been sent Succesfully. Thank you!!!</div>';
                    $("#fields").hide();

                }
                else
                {

                    result = msg;

                }

                $("#note").hide();
                $("#note").html(result).slideDown("slow");
                $("#note").html(result);

                });

            }

        });

    return false;

    });

});

PHP(请注意，我已删除此处的所有验证，以便更容易理解)

$title     = $_POST["Form"]["title"];
$forename  = trim($_POST["Form"]["forename"]);
$surname   = trim($_POST["Form"]["surname"]);
$telephone = trim($_POST["Form"]["telephone"]);
$email     = trim($_POST["Form"]["email"]);
$message   = trim($_POST["Form"]["message"]);

$name = $title . " " . $forename . " " . $surname;

require_once("inc/PHPMailer/class.phpmailer.php");

$mail = new PHPMailer();

$email_body = "";
$email_body = $email_body . "<h1 class='heading'><strong>Name:</strong></h1><br />" . $name . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Telephone Number:</strong></h1><br />" . $telephone . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Email:</strong></h1><br />" . $email . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Message:</strong></h1><br />" . $message;

$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.com";
$mail->Port = 465;
$mail->Username = "****";
$mail->Password = "****";

$mail->SetFrom($email, $name);
$address = "*******";
$mail->AddAddress($address, "*****");
$mail->Subject = "Email Subject | " . $name;
$mail->MsgHTML($email_body);

HTML

<form class="cf form-contact" id="get-contact-form" action="javascript:alert('success!');" >
    <div id="note"></div>
    <div id="fields">
        <div class="row grid-full">
            <label for="title">Title</label>
            <select name="Form[title]" id="title">
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
                <option value="Dr">Dr</option>
            </select>
        </div>
        <div class="grid-2">
            <label for="forname">First Name</label>
            <input type="text" name="Form[forename]" id="forename" />
            <label for="surname">Last Name</label>
            <input type="text" name="Form[surname]" id="surname" />
        </div>
        <div class="grid-2">
            <label for="telephone">Telephone</label>
            <input type="text" name="Form[telephone]" id="telephone" />
            <label for="email">Email Address</label>
            <input type="text" name="Form[email]" id="email" />
        </div>
        <div class="row grid-4" style="display: none;">
            <label for="address">Address</label>
            <input type="text" name="Form[address]" id="address" />
            <p>Please leave this field blank.</p>
        </div>
        <div class="row grid-4">
            <label for="message">Comments</label>
            <textarea rows="12" name="Form[message]" id="message"></textarea>
            <button type="submit" class="btn">Submit</button>
        </div>
    </div>
</form>

Answer 1

根据documentation你的 php 中缺少这行

if(!$mail->send()) {
   echo 'Message could not be sent.';
   echo 'Mailer Error: ' . $mail->ErrorInfo;
   exit;
}else{
   echo 'ok';
}