Question

HTML代码

<form class="ajax-form" id="contactForm" method="post" action="assets/php/contact.php">
    <div class="form-group">
        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name..." value="" required>
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="email" name="email" placeholder="Your email..." value="" required>
    </div>
    <div class="form-group">
        <input type="phone" class="form-control" id="phone" name="phone" placeholder="Your phone..." value="" required>
    </div>
    <div class="form-group">
        <textarea class="form-control" rows="4" name="message" placeholder="Your message..." required></textarea>
    </div>
    <div class="form-group">
        <button type="submit" name="submit" class="btn btn-default"><i class="fa fa-paper-plane fa-fw"></i> Send</button>
    </div>
</form>

PHP代码（contact.php）

header('Content-type: application/json');
if($_POST) {
    $to_email = "nishat.sayyed0403@gmail.com"; //Recipient email, Replace with own email here

    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        $output = json_encode(array( //create JSON data
            'type' => 'error',
            'text' => 'Sorry Request must be Ajax POST'
        ));
        die($output); //exit script outputting json data
    }

    //Sanitize input data using PHP filter_var().
    $user_name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
    $user_email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $phone_number = filter_var($_POST["phone"], FILTER_SANITIZE_NUMBER_INT);
    $message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);

    //additional php validation
    if(strlen($user_name) < 4) { // If length is less than 4 it will output JSON error.
        $output = json_encode(array(
            'type' => 'error',
            'text' => 'Name is too short or empty!'
        ));
        die($output);
    }

    if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)) { //email validation
        $output = json_encode(array(
            'type' => 'error',
            'text' => 'Please enter a valid email!'
        ));
        die($output);
    }


    if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)) { //check for valid numbers in phone number field
        $output = json_encode(array(
            'type' => 'error',
            'text' => 'Enter only digits in phone number'
        ));
        die($output);
    }

    if(strlen($message) < 3) { //check emtpy message
        $output = json_encode(array(
            'type' => 'error',
            'text' => 'Too short message! Please enter something.'
        ));
        die($output);
    }

    //email subject
    $subject = 'New mail via contact form';

    //email body
    $message_body = $message . "\r\n\r\n-" . $user_name . "\r\n\r\nEmail : " . $user_email . "\r\nPhone Number : " . $phone_number;

    //proceed with PHP email.
    $headers = 'From: ' . $user_name . '<' . $user_email . '>' . "\r\n" . 'Reply-To: ' . $user_name . '<' . $user_email . '>' . "\r\n" . 'X-Mailer: PHP/' . phpversion();

    $send_mail = mail($to_email, $subject, $message_body, $headers);

    echo "<h1 style='color: red; font-size: 100px'>From contact.php</h1>";

    if(!$send_mail) {
        //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
        $output = json_encode(array(
            'type' => 'error',
            'text' => 'Could not send mail! Please check your PHP mail configuration.'
        ));
        die($output);
    } else {
        $output = json_encode(array(
            'type' => 'success',
            'text' => 'Hi ' . $user_name . ', thank you for your email, we will get back to you shortly.'
        ));
        echo ($output);
    }
}

AJAX代码

$(function() {
            // validate contact form on keyup and submit
            $("#contactForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2,
                        lettersonly: true
                    },
                    email: {
                        required: true,
                        minlength: 6,
                        email: true
                    },
                    phone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15
                    },
                    message: {
                        required: true,
                        minlength: 6
                    }
                },
                messages: {
                    name: {
                        required: "Please enter your name",
                        minlength: "Minimum 2 characters",
                        lettersonly: "Only letters please!"
                    },
                    email: {
                        required: "Please enter your email address",
                        minlength: "Minimum 6 characters",
                        email: "That's an invalid email"
                    },
                    phone: {
                        required: "Please enter your phone number",
                        digits: "Only digits (no spaces)",
                        minlength: "Minimum 10 characters",
                        maxlength: "Maximum 15 characters"
                    },
                    message: {
                        required: "Please enter your message",
                        minlength: "Minimum 6 characters"
                    }
                },
                success: function(label) {
                    label.addClass("valid").text("Perfect!");
                },
                submitHandler: function(element) {

                    var ajaxform = $(element),
                        url = ajaxform.attr('action'),
                        type = ajaxform.attr('method'),
                        data = {};

                    $(ajaxform).find('[name="submit"]').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Sending...');


                    ajaxform.find('[name]').each(function(index, value) {
                        var field = $(this),
                            name = field.attr('name'),
                            value = field.val();

                        data[name] = value;

                    });

                    $.ajax({
                        url: url,
                        type: type,
                        data: data,
                        success: function(response) {
                            if (response.type == 'success') {
                                $("#contactForm").before("<div class='alert alert-success' role='alert'><a href='#' class='close' data-dismiss='alert'>&times;</a>" + response.text + "</div>");
                                $(ajaxform).each(function() {
                                    this.reset();
                                    $(this).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
                                }).find('.valid').each(function() {
                                    $(this).remove('label.valid');
                                })
                            } else if (response.type == 'error') {
                                $("#contactForm").before("<div class='alert alert-danger' role='alert'><a href='#' class='close' data-dismiss='alert'>&times;</a>" + response.text + "</div>");
                                $(ajaxform).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
                            }
                        }
                    });

                    return false;
                }
            });

问题在于，每当我点击发送按钮时，都不会执行任何操作。既不积极也不消极。没有任何事情发生。

我想根据输入的电子邮件ID向用户发送电子邮件。

Answer 1

乍看之下是

之间的区别

$（给ajaxForm）.find

和

ajaxform.find

在下面的线上吗？哪个是对的？

单击提交按钮后没有发生AJAX操作

1 个答案: