使用jQuery Ajax顯示電子郵件發送成功

Question

我寫了一個聯繫表單和php腳本發送電子郵件查找，但是當郵件發送時它重新加載一個新頁面。

我想使用Ajax時被髮送，而不是去一個新的頁面

任何方式輕鬆使用jQuery做這個的消息顯示一條消息給用戶？

我的形式：

 <form id="cont-form" method="post" action="mail.php"> 
    <fieldset> 
    <legend>Send me a message</legend> 
    <ol> 
     <li> 
     <label for="name">Name</label> 
     <input id="name" name="name" type="text" placeholder="First and last name" required> 
     </li> 
     <li> 
     <label for="email">Email</label> 
     <input id="email" name="email" type="email" placeholder="example@domain.com" required> 
     </li> 
     <li> 
     <label for="phone">Phone</label> 
     <input id="phone" name="phone" type="tel" placeholder="Eg. 07500000000" required> 
     </li> 
     <li> 
     <label for="subject">Subject</label> 
     <input id="subject" name="subject" type="text" placeholder="Eg. Enquiry" required> 
     </li> 
     <li> 
     <label for="message">Message</label> 
     <textarea id="message" name="message" placeholder="Insert your message or question" rows="10" cols="50"></textarea> 
     </li> 
     <li> 
     <label for="human">Enter the number 4 if you're human</label> 
     <input id="human" name="human" type="text" placeholder="Are you human?" required> 
     </li> 
    </ol> 
    </fieldset> 
    <fieldset> 
    <input class="button" id="submit" name="submit" type="submit" value="Send it!"> 
    </fieldset> 
</form> 

我的PHP腳本：

<?php 
    $name = $_POST['name']; //'name' has to be the same as the name value on the form input element 
    $email = $_POST['email']; 
    $message = $_POST['message']; 
    $human = $_POST['human']; 
    $from = $_POST['email']; 
    $to = 'ben_humphries@hotmail.co.uk'; //set to the default email address 
    $subject = $_POST['subject']; 
    $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 

    $headers = "From: $email" . "\r\n" . 
    "Reply-To: $email" . "\r\n" . 
    "X-Mailer: PHP/" . phpversion(); 

    if(isset($_POST['submit']) && ($_POST['human']) == '4') {    
    mail ($to, $subject, $body, $headers); //mail sends it to the SMTP server side which sends the email 
    echo "<p>Your message has been sent!</p>"; 
    } 

    else { 
    echo "<p>Something went wrong, go back and try again!</p>"; 
    } 
    if (!isset($_POST['submit']) && ($_POST['human']) != '4') { 
    echo "<p>You answered the anti-spam question incorrectly!</p>"; 
    } 
    ?> 

Answer 1

燁。你需要做兩件事情：

1-更改提交按鈕，所以它調用一個jQuery/JavaScript函數，做AJAX調用：

<button class="button" id="submit" name="submit">Send it!</button> 

您可以設置的onclick上的HTML或JQuery的單擊事件綁定：

$(document).ready(function(){ //this is executed when the document is fully loaded 
    $("#submit").click(function(){ 
     $.post("mail.php", $("#cont-form").serialize(), function(data){ 
       //this is a callback function, when the AJAX calls ends anything 
       //echoed by mail.php goes into the data variable it receives. 
       alert(data); 
     }); 
    }); 
}); 

2 - 更改mail.php呼應要alert()消息。在你的情況下，它可能已經工作。如果您要返回HTML代碼，則最好將其顯示在div內部，而不要執行alert()。