結合使用AJAX和聯系表單來刪除頁面重新加載

Question

我在這里看到了很多與此有關的問題，並從幾個答案中獲取了我現在得到的代碼。

但是由於某種原因，我無法使其正常運行，並且無法弄清原因。

我有一個HTML表單，其中的代碼如下：

<form id="quick_contact" name="quick_contact" action="" method="POST">
    <div class="input-control text">
        <input id="name" name="name" type="text" value="" placeholder="Enter name here">
    </div>
    <div class="space10">&nbsp;</div>
    <div class="input-control email">
        <input id="email" name="email" type="email" value="" placeholder="Enter email address here"/>
    </div>
    <div class="space10">&nbsp;</div>
    <div class="input-control textarea">
        <textarea id="comments" name="comments" placeholder="Enter Comments Here"></textarea>
    </div>
    <div class="space10">&nbsp;</div>
    <button id="quick_submit" name="quick_submit" onclick="quickContact()">Send</button>                      
</form>

從托馬斯的答案開始，我的jQuery在這里更新了 ：

<script type="text/javascript">
    function quickContact(){
        $.ajax({
        type: "POST",
        url: "quick-contact.php",
        data:
             {
                 name: $('#name').val().trim(),
                 email: $('#email').val().trim(),
                 comments: $('#comments').val().trim(),                 
             },            
        success: function(html) {
                     var submitted = $.trim(html);
                     if (submitted) {
                         alert("Thanks for your submission");
                         $('#quick_contact')[0].reset();
                         return;
                     } else {
                         alert("Failed to submit.");
                         return false;
                }
        }
    });         
};
</script>

這是PHP，它在名為“ quick-contact.php”的文件中處理電子郵件的內容， 並在Thomas的回答中再次進行了更新 ：

if(isset($_POST) == true){
    $status = 1 // init to one, assume there will not be an error
    //Store the entered values in the variables
    $name = mysql_escape_string(trim($_POST['name']));
    $email = mysql_escape_string(trim($_POST['email']));
    $comments = mysql_escape_string(trim($_POST['comments']));
    $comments = str_replace('\r\n','<br>',$comments);

    // EMAIL HEADERS
    $headers = "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/html; charset=utf-8\n";
    $headers .= "X-Priority: 3\n";
    $headers .= "X-MSMail-Priority: Normal\n";
    $headers .= "X-Mailer: php\n";          
    $headers .= "From: *****<*****@l*****>\n";

    //SEND EMAIL TO BRANCH
    // EMAIL TITLE
    $subject = $name . " " . get_content(3344);

    //message
    $message1 = "<style type=\"text/css\">";
    $message1 .= "div { font-family: Arial, Verdana, Tahoma; font-size: 10pt; line-height: 120%; }";
    $message1 .= "h1 { margin: 0; font-size: 14pt; }";
    $message1 .= "h2 { margin: 0; font-size: 12pt; }";
    $message1 .= "span { font-size: 9pt; font-weight: bold; }";
    $message1 .= "</style>\n";
    $message1 .= "<div>";
    $message1 .= "<p>" . $name . " " . get_content(3344) . "</p>\n";
    $message1 .= "<p>" . get_content(3345) . "</p>\n";
    $message1 .= "<p><b>" . ucwords(get_content(2869)) . ":</b> " . $name . "<br />";
    $message1 .= "<b>" . ucwords(get_content(27)) . ":</b> " . $email . "<br />";
    $message1 .= "<b>" . ucwords(get_content(1258)) . ":</b> " . $comments . "<br />";
    $message1 .= "</p>\n";
    $message1 .= get_content(893); // King Regards, 
    $message1 .= "<br /><br />";
    $message1 .= "<img src=\"***********\" alt=\"*******\">";
    $message1 .= "<br />";
    $message1 .= "</div>";

    //SEND CUSTOMER AN EMAIL
    // EMAIL TITLE
    $subject2 = get_content(392);

    //message
    $message2 = "<style type=\"text/css\">";
    $message2 .= "div { font-family: Arial, Verdana, Tahoma; font-size: 10pt; line-height: 120%; }";
    $message2 .= "h1 { margin: 0; font-size: 14pt; }";
    $message2 .= "h2 { margin: 0; font-size: 12pt; }";
    $message2 .= "span { font-size: 9pt; font-weight: bold; }";
    $message2 .= "</style>\n";
    $message2 .= "<div>";
    $message2 .= "<p>" . $name . ",</p>\n";
    $message2 .= "<p>" . get_content(392) . "</p>\n";
    $message2 .= "<p>" . str_replace("{TEL_NUMBER}", $header_branch_details[0]['Tel'], str_replace("{BRANCH_EMAIL}", $header_branch_details[0]['SalesEmail'], get_content(2764))) . "</p>\n";
    $message2 .= get_content(893); // King Regards, 
    $message2 .= "<br /><br />";
    $message2 .= "<img src=\"*********\" alt=\"*********\">";
    $message2 .= "<br />";
    $message2 .= "</div>";

    //Send branch email
    $success = mail('***@****.com', $subject, $message1, $headers); 
    //Send customer email
    $success2 = mail($email, $subject2, $message2, $headers);

    if (!$success) {
       $status = 0;
    }   
    echo $status;
}

很抱歉，我真的希望有人能在這里為我提供幫助

Answer 1

通過調用doSomething（）的onClick事件將提交類型更改為按鈕類型。

然后，讓doSomething（）運行ajax調用，如下所示：

function doSomething() {
    $.ajax({
         type: 'post',
         url: 'quick-contact.php',
         data:
         {
             name: $('#name').val().trim(),
             email: $('#email').val().trim(),
             comments: $('#comments').val().trim(),                 
         },
         success: function(html) {
             var status = $.trim(html);
             if (status) {
                 alert("Thanks for your submission");
                 $('#quick_contact')[0].reset();
                 return;
             } else {
                 alert("Failed to submit.");
                 return false;
             }
         }
    });
 }

然后在您的PHP中，您要做的就是檢查$ _POST是否已設置。

 if (($_POST)) {
     $status = 1; // init to one, assume there will not be an error
     $name = $_POST['name'];
     //etc, but FILTER the data coming from the client
 }

另外，您可能想在mail（）函數附近執行以下操作：

$success = mail(//etc);
if (!$success) {
   $status = 0;
}

echo $status;

如果您還有問題，請告訴我。 我很樂意提供幫助。