javascript - 为什么表单提交消息显示我的 index.html 文件中的所有字符？

Question

当我的消息被提交时，它会转到我的电子邮件地址并且工作正常，但消息成功通知不会显示“您的消息已成功发送。”，而是显示我的索引文件中的所有代码行。

我认为这与style="display: none"有关。

知道如何显示“您的消息已发送”消息吗？

index.html

            <div class="col-lg-5 mx-auto">
              <div class="contact-form">
                <div class="container"> 
                    <form class="contact-form" method="post" action="mail.php">    

                    <!-- form message -->
                        <div class="row">
                            <div class="col-lg-12">
                              <div class="alert alert-success contact__msg" style="display: none" role="alert">
                              Your message was sent successfully.
                                </div>
                                </div>
                            </div>
                    <!-- end message -->

                    <!-- form element -->
                        <div class="form-group">
                            <label><strong>Name</strong></label>
                              <input name="name" type="text" class="form-control" placeholder="Enter Name" required>
                        </div>
                        <div class="form-group">
                            <label><strong>Email</strong></label>
                              <input name="email" type="email" class="form-control" placeholder="Enter Email" required>
                        </div>
                        <div class="form-group">
                            <label><strong>Message</strong></label>
                              <textarea name="message" class="form-control" rows="3" placeholder="Enter Message" required></textarea>
                        </div>
                        <button name="submit" type="submit" class="btn btn-default"><span class="fa fa-paper-plane"></button></span>
                    <!-- end form element -->
                    </form>
                        </div>
                </div>

mail.php

<?php

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        # FIX: Replace this email with recipient email
        $mail_to = "*myemail*@gmail.com";

        # Sender Data
        $name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"])));
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($subject) OR empty($message)) {
            # Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Please complete the form and try again.";
            exit;
        }

        # Mail Content
        $content = "Name: $name\n";
        $content .= "Email: $email\n\n";
        $content .= "Message:\n$message\n";

        # email headers.
        $headers = "From: $name <$email>";

        # Send the email.
        $success = mail($mail_to, $subject, $content, $headers);
        if ($success) {
            # Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            # Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong, we couldn't send your message.";
        }

    } else {
        # Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

main.js

(function ($) {
    'use strict';

    var form = $('.contact-form'),
        message = $('.contact__msg'),
        form_data;

    // Success function
    function done_func(response) {
        message.fadeIn().removeClass('alert-danger').addClass('alert-success');
        message.text(response);
        setTimeout(function () {
            message.fadeOut();
        }, 100000);
        form.find('input:not([type="submit"]), textarea').val('');
    }

    // fail function
    function fail_func(data) {
        message.fadeIn().removeClass('alert-success').addClass('alert-success');
        message.text(data.responseText);
        setTimeout(function () {
            message.fadeOut();
        }, 100000);
    }

    form.submit(function (e) {
        e.preventDefault();
        form_data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form_data
        })
        .done(done_func)
        .fail(fail_func);
    });

})(jQuery);

Answer 1

检查您指定响应但不显示文本的成功函数。 例如:message.text(response.??);

不包括包含来自后端脚本的消息的字段，所以我猜问题出在这里。 display:none 不是问题...