javascript - 在本地服务器而非实时服务器上发送 AJAX/PHP 表单

Question

所以我遇到了一个奇怪的问题，我创建的联系表单可以在我的本地主机上运行，​​但无法实时运行。我使用 AJAX 和 PHP 作为表单。当我实时发送和本地发送时，我的代码中没有错误。在实时服务器上，表单允许我提交并给出成功消息，但该消息永远不会发送。不太清楚为什么它在本地工作但在实时服务器上失败。

以下是表单的代码:

<form class="column small-12 medium-6 large-6 contact-form" id="formContact" action="contact-form-post2.php" method="post">

<div class="row">

    <div class="column large-12">

        <div class="contactResponse"></div>

    </div>
</div>

<div class="row">

    <div class="column large-12">

        <input type="text" name="firstLastName"  id="cname" placeholder="First & Last Name" value required>
    </div>

</div>
<!--/.row -->

<div class="row">

    <div class="column large-12">

        <input type="email" name="email" id="cemail"  placeholder="Email" value required>
    </div>

</div>
<!--/.row -->

<div class="row">

    <div class="column large-12">

        <textarea name="message" rows="10" id="ccomment" value required></textarea>
    </div>

</div>
<!-- /.row -->

<div class="row">

    <div class="column large-12">
        <button type="submit" id="submit" name="submit" class="button submit">Submit</button>

    </div>
</div>

下面是表单验证和提交的代码

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name    = $_POST['firstLastName'];
    $email   = $_POST['email'];
    $message = $_POST['message'];

    $to      = "shekinahc.smith@gmail.com";
    $subject = "Website Contact Form Message";
    $headers = "From: $email";

    mail($to,$subject,$message,$headers);
}
 ?>


 $("#formContact").validate({

    // converting error message to placeholder to style with red background
    errorPlacement: function (error, element) {
        element.attr("placeholder", error[0].outerText);
    },

    submitHandler: function(form) {
        $.ajax({
            url: 'contact-form-post2.php',
            type: 'POST',
            data: $(form).serialize(),
            success: function(response) {

                var submit = $(form).find( 'button[type="submit"]' );

                $( ".contactResponse" ).html('Your message has been sent. We will contact you soon.');

                submit.text('Sent, Thank you');

                submit.attr("disabled", true); 
            }            
        });
    }
});

Answer 1

您的代码中存在一些问题，请尝试以下操作:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['firstLastName'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $to = "shekinahc.smith@gmail.com";
    $subject = "Website Contact Form Message";
    $headers = "From: test@{$_SERVER['SERVER_NAME']}\r\n";
    mail($to, $subject, $message, $headers);
}
?>

<script type="text/javascript">
    $("#formContact").validate({
        // converting error message to placeholder to style with red background
        errorPlacement: function (error, element) {
            element.attr("placeholder", error[0].outerText);
        },
        submitHandler: function (form) {
            $.ajax({
                url: 'contact-form-post2.php',
                type: 'POST',
                data: $(form).serialize(),
                success: function (response) {
                    var submit = $(form).find('button[type="submit"]');
                    $(".contactResponse").html('Your message has been sent. We will contact you soon.');
                    submit.text('Sent, Thank you');
                    submit.attr("disabled", true);
                }
            });
        }
    });
</script>

<form class="column small-12 medium-6 large-6 contact-form" id="formContact" action="contact-form-post2.php" method="post">
    <div class="row">
        <div class="column large-12">
            <div class="contactResponse"></div>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <input type="text" name="firstLastName" id="firstLastName" placeholder="First & Last Name" value required>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <input type="email" name="email" id="email" placeholder="Email" value required>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <textarea name="message" rows="10" id="ccomment" required></textarea>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <button type="submit" id="submit" name="submit" class="button submit">Submit</button>
        </div>
    </div>
</form>

关键的变化是邮件 header 中的From地址使用用户POST发送的电子邮件，该电子邮件将具有与测试/实时服务器不同的域。这通常会阻止邮件到达目的地，但必须以某种方式允许您的实时服务器。

注意到的另一件事:2 个表单字段声明了 2 个不同的 id，导致 html 无效，这在某些情况下可能会导致 js 错误 - 每个 html 元素只能有 1 个 id 属性。