如何提交表单而不刷新当前页面？

Question

I have a fairly basic email form

<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>

Here's '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>';
    }
}

?>

So my problem is that when the form submits to the php file, the browser loads the php file, runs the code and returns the result (It's not really a problem but it's something I don't want) It is then up to java to display the alert and go back one (in my code anyway). Is there a way to make it run the code in the background so the form runs the php file without having to go to it (if that makes sense) and return the result in the same window. I've obviously looked around and found loads of things about AJAX but I didn't really understand it and couldn't get it to work for me.

The reason for doing this is a little complicated but would make things much easier as far as user-friendliness goes for my site, as well as looking cleaner (going to a blank page and displaying an alert doesn't look very good).

Thanks in advance for any help you can offer me:)

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;
    }
});

Here's something you can start with. This is very basic but supplies the necessary foundation for beginning your AJAX adventure.

50 Excellent AJAX Tutorials