帶有PHP郵件程序的jQuery AJAX聯系人表格跳轉到郵件頁面

Question

我正在做一個簡單的聯系表，我有一個老式的php郵件程序mail.php和一個從其調用它的jQuery主頁。

正如我希望它能正常工作一樣，它應該留在同一頁面上，但實際上它跳到mail.php並顯示消息“ Thank you for contacting me. I'll try to reach you ASAP. Thank you for contacting me. I'll try to reach you ASAP. 盡管它確實發送了郵件，但是那仍然不是我可以接受的，因為那不是我的意圖。 有人能找出我在做什么錯嗎？

任何幫助表示贊賞。

PHP：

<?php   
$name = trim($_POST['name']);

$email = trim($_POST['email']);

if(function_exists('stripslashes')) {
    $message = stripslashes(trim($_POST['message']));
} else {
    $message = trim($_POST['message']);
}

$emailTo = 'myEmail@gmail.com';
$subject = 'Contact Form Submission from '.$name;
$sendCopy = trim($_POST['sendCopy']);
$body = "Name: $name \n\nEmail: $email \n\nMessage: $message";
$headers = 'From: Saddi website <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);
echo "Thank you for contacting me. I'll try to reach you ASAP.";
return true;
?>

FORM（此處有很多bootstrap標簽，因此為了保持整潔，我只是發布）：

    <form class="form" action="mail.php" method="post" id="contact-form">


                    </form>

這是我的AJAX：

    var data_string = jQuery('#contact-form').serialize();

    jQuery.ajax({
        type: "POST",
        url: "mail.php",
        data: {name:name,email:email,message:message}, 
        timeout: 6000,
        error: function(request,error) {
            if (error == "timeout") {
                jQuery('#timedout').fadeIn('slow');
                setTimeout(function() {
                    jQuery('#timedout').fadeOut('slow');
                }, 3000);
            }
            else {
                jQuery('#state').fadeIn('slow');
                jQuery("#state").html('The following error occured: ' + error + '');
                setTimeout(function() {
                    jQuery('#state').fadeOut('slow');
                }, 3000);
            }
        },
        success: function() {
            jQuery('span.valid').remove();
            jQuery('#thanks').fadeIn('slow');
            jQuery('input').val('');
            jQuery('textarea').val('');
            setTimeout(function() {
                jQuery('#thanks').fadeOut('slow');
            }, 3000);
        }

Answer 1

首先，我將建議您使用jQuery Form Plugin，對於此類Ajax發布和驗證非常有用。

jQuery表單

其次，您可以使用event.preventDefault（）; 避免鏈接的默認操作，但這實際上取決於您如何觸發表單到ajax代碼

event.preventDefault