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

Question

I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error checking. I'm using code from this example which I've adapted slightly to accommodate the new .ajaxComplete() guidelines.

I've zero idea why this isn't working, but I'll provide both my form, ajax request and working example in the hope someone can help:

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 (Please note I've removed all validation here to make it easier to follow)

$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

According to the documentation you are missing this lines in your php

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