php - Php echo功能不适用于联系表单上的ajax

Question

最近我一直在尝试制作一个带有recaptcha 支持的html 联系表格，在php 上使用echo 来显示失败和成功消息，问题是我不知道为什么它没有与css 一起出现。但是当我<p class="alert alert-warning">Please check the the captcha form.</p>在主网站上使用代码时它可以工作。 错误图片

邮件.php

    <?php

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

        // access
        $secretKey = '6LcEPdAaAAAAAHP4NLmyC1UNC5Ce9_0__gTaF5Im';
        $captcha = $_POST['g-recaptcha-response'];

        if(!$captcha){
          echo '<p class="alert alert-warning">Please check the the captcha form.</p>';
          exit;
        }

        # FIX: Replace this email with recipient email
        $mail_to = "[e-mail]";
        
        # Sender Data
        $subject = trim($_POST["subject"]);
        $name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"])));
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $phone = trim($_POST["phone"]);
        $message = trim($_POST["message"]);
        
        if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($phone) OR empty($subject) OR empty($message)) {
            # Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo '<p class="alert alert-warning">Please complete the form and try again.</p>';
            exit;
        }

        $ip = $_SERVER['REMOTE_ADDR'];
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
        $responseKeys = json_decode($response,true);

        if(intval($responseKeys["success"]) !== 1) {
          echo '<p class="alert alert-warning">Please check the the captcha form.</p>';
        } else {
            # Mail Content
            $content = "Name: $name\n";
            $content .= "Email: $email\n\n";
            $content .= "Phone: $phone\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 '<p class="alert alert-success">Thank You! Your message has been sent.</p>';
            } else {
                # Set a 500 (internal server error) response code.
                http_response_code(500);
                echo '<p class="alert alert-warning">Oops! Something went wrong, we couldnt send your message.</p>';
            }
        }

    } else {
        # Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo '<p class="alert alert-warning">There was a problem with your submission, please try again.</p>';
    }

?>

html联系表格

        <!-- contact-form-area start -->
        <section class="contact-form-area gray-bg pt-100 pb-100">
            <div class="container">
                <div class="form-wrapper">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title section-title-p text-center mb-65">
                                <span>Contacto</span>
                                <h2>Estime su idea</h2>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form">
                        <form id="contact-form" action="mail.php" method="POST" novalidate="novalidate">
                                                            <!-- form message -->
                                <div class="row">
                                    <div class="col-12">
                                        <div class="contact__msg" style="display: none">
                                            <p>Your message was sent successfully.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- end message -->
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-box user-icon mb-30">
                                        <input type="text" name="name" placeholder="Nombre">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-box email-icon mb-30">
                                        <input type="text" name="email" placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-box phone-icon mb-30">
                                        <input type="text" name="phone" placeholder="Teléfono">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-box subject-icon mb-30">
                                        <input type="text" name="subject" placeholder="Tema">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-box message-icon mb-30">
                                        <textarea name="message" id="message" cols="30" rows="10"
                                            placeholder="Su mensaje"></textarea>
                                    </div>
                                    <div class="contact-btn text-center">
                                        <div class="g-recaptcha" data-sitekey="6LcEPdAaAAAAANZ4XBQbzf4rkV7yhz9U4-BOTBGK"></div>
                                        <button class="btn btn-icon ml-0" type="submit">Enviar mensaje</button>

                                    </div>
                                </div>
                            </div>
                        </form>
                        <p class="ajax-response text-center"></p>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact-form-area end -->

标签： phphtmlcssajax

Answer 1

因为在某处，您的 ajax 代码可能会像这样插入 HTML：

$('.ajax-response').text(result);

什么时候应该

$('.ajax-response').html(result);