Question

我正在尝试向我的php文件发送一个AJAX调用，以在填写联系表单后发送电子邮件。当我只是试图从php获取回声响应并将其放在我的表单上方的div中时，我有完美的工作，但是我希望附加一些数据并在它成功后添加一个类以使其更好看。现在，使用此代码，电子邮件仍会发送，但邮件或类不会显示。

我做错了什么？我怎样才能获得php的响应，以显示在contactSuccess div中，同时附加所有内容并隐藏contactSuccess div，直到它成功通过？

<script>
    $(document).ready(function(){

    $('#submit').click(function(){

    $.post("contactSend.php", $("#mycontactform").serialize(),  function(response) {
    //test
    $('#contactMessageStatus').append(data);
    $('#contactMessageStatus').addClass("contactSuccess");
    $('html, body').animate({
         scrollTop: $("#contactMessageStatus").offset().top
     }, 2000);
    //endtest
    $('#contactMessageStatus').html(response);
    //$('#success').hide('slow');
    });
    return false;
    });
    });
</script>

表格

<div id="contactMessageStatus"></div>
    <form action="" method="post" id="mycontactform" >
        <input type="text"  class="inputbar" name="name" placeholder="Full Name" required>
        <input type="email"  class="inputbar" name="email" placeholder="Email" required>
        <input type="message"  class="inputbar" name="message" placeholder="Message" required>
        <input type="button" value="Send Message" id="submit">
    </form>

CSS

#contactSuccess {
    border-style: solid !important;
    border-width: 1px !important;
    background-position: 10px 9px !important;
    background-repeat: no-repeat !important;
    min-height: 24px !important;
    padding: 8px 8px 8px 32px !important;
    font-size: 11px !important;
    font-weight: bold !important;

    border-color: #446423;
    background-color: #eff5ea;
    background-image: url(success_check.gif);
    color: #3d6611;
}

PHP文件 - 添加此项以防万一

<?php

// Here we get all the information from the fields sent over by the form.
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = 'contact@example.com';
$subject = 'SFL Contact Form Submitted';
$message = 'FROM: '.$name. ' ' . ' Email: '.$email. ' ' . 'Message: '.$message;
$headers = 'From: contact@example.com' . "\r\n";

if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{
echo "Invalid Email, please provide an correct email.";
}
?>

Answer 1

问题很可能出在您的$ .post响应处理程序中。尝试显示响应之前的一行可能是抛出异常。我怀疑是这条线......

$('#contactMessageStatus').append(data);

...但这只是因为我无法看到你从哪里获得'数据'。

在try / catch块中的响应处理程序中包装该部分代码，并查看异常是否确实导致此问题。

Answer 2

更改$（'＃contactMessageStatus'）。append（data）; to $（'＃contactMessageStatus'）。append（response）;

Answer 3

根据PHP的响应在脚本中添加了if else语句。

<script>
$(document).ready(function(){

$('#submit').click(function(){

    $.post("contactSend.php", $("#mycontactform").serialize(),  function(response) {
    //test
    if(response == 'Your email was sent!')
    {
        $('#contactMessageStatus').append(response);
        $('#contactMessageStatus').addClass("contactSuccess");
        $('html, body').animate({
        scrollTop: $("#contactMessageStatus").offset().top
        }, 2000);
        //endtest
        $('#contactMessageStatus').html(response);
        //$('#success').hide('slow');
    }
    else
    {
        //error handling code
    }
    });
    return false;
});
});
</script>

Answer 4

 $(document).ready(function () {
                      $("#frm-comment").on('submit',function (e) {
                        e.preventDefault();
                         $.ajax({
                          
                                success: function(response)  {
                                $("#showcomments").prepend(response);
                                 }
                               });
                          });
                    });

使用php echo

4 个答案: