如何在不刷新當前頁面的情況下提交表單？

Question

我有一個相當基本的電子郵件形式

<form name="contactform" method="post" action="send_email.php" id="email_form"> 
    <div class="ContactHeaders">Name</div> 
    <input type="text" name="Name" class="ContactBoxes" id="name"/><br/><br/> 
    <div class="ContactHeaders">Email</div> 
    <input type="email" name="Email" class="ContactBoxes"/><br/><br/> 
    <div class="ContactHeaders">Message</div> 
    <div style="width:100%"> 
    <textarea name="Message" maxlength="1000"></textarea><br/> 
    </div> 
    <div style="width: 100%"> 
    <input type="submit" class="Submitbtn" value="Submit"> 
    </div> 
</form> 

這裏的「send_email.php」

<?php 
ob_start(); 
include 'navbar.php'; 
ob_end_clean(); 

if(isset($_POST['Email'])) { 

    //declare variables 
    $Name = $_POST['Name']; 
    $Email = $_POST['Email']; 
    $Message = $_POST['Message']; 
    $complete = 0; 
    $email_to = "someone@example.com"; 
    $email_subject = "Website Contact"; 

    //check all forms are filled in correctly 

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; 
    if(preg_match($email_exp,$Email)) { 
    $complete++; 
    } 
    $string_exp = "/^[A-Za-z .'-]+$/"; 
    if(preg_match($string_exp,$Name)) { 
    $complete++; 
    } 
    if(strlen($Message) > 20) { 
    $complete++; 
    } 
    //send email if $complete = 4 
    if ($complete == 3){ 
     if (get_magic_quotes_gpc()) { 
      $Message = stripslashes($Message); 
     } 
    $Message = $Message . "\n\n" . "From " . $Name; 
    $headers = 'From: '.$Email."\r\n". 
'Reply-To: '.$Email."\r\n" . 
'X-Mailer: PHP/' . phpversion(); 
@mail($email_to, $email_subject, $Message, $headers); 
echo '<script> 
    alert("Thank you for contacting me. I will be in touch shortly"); 
    top.location="index.php"; 
    </script>'; 
} 
else { 
    echo '<script> 
      alert("The form you submitted is invalid. Please ensure the following: \n You have provided a valid email address. \n Your phone number is entered correctly. \n The message box contains at least 20 characters.") 
      history.go(-1) 
      </script>'; 
    } 
} 

?> 

所以我的問題是，當表單提交到PHP文件時，瀏覽器加載PHP文件，運行代碼並返回結果（這不是一個真正的問題，但它是我不想要的）然後由java來顯示警報並返回一個（在我的代碼中）。有沒有辦法讓它在後臺運行代碼，以便表單運行php文件而不必去（如果有意義的話）並在相同的窗口中返回結果。我顯然四處看了看，發現了很多關於AJAX的東西，但是我並沒有真正理解它，也無法讓它爲我工作。

做這件事的原因有點複雜，但會讓事情變得容易很多，只要用戶友好適用於我的網站，並且看起來更乾淨（進入空白頁面並顯示警告看起來不是很好好）。

預先感謝任何幫助，您可以給我:)

Answer 1

$('.Submitbtn').click(function(e) { 
    e.preventDefault(); 
    // do some form validation here 
    if form is valid { // from validation above 
     var formData = $('#email_form').serialize(); 
     $.post('send_email.php',{data:formData}); 
    } else { 
     alert('Form no good - fix it!'); 
     return false; 
    } 
}); 

這裏的東西你可以開始。這是非常基本的，但爲開始AJAX冒險提供了必要的基礎。

50 Excellent AJAX Tutorials