javascript - 没有重定向的 Ajax php 联系表单

Question

我有一个使用联系表格的页面。现在，当我点击“提交”时，表单会将我重定向到下一页。

但我希望页面不重定向，而是在我的表单中显示成功消息或加载新页面并显示消息。但我不希望它重定向到第二页..

我的页面:http://bit.ly/1PLbZcL

这是我的 html 代码:

 <form name="htmlform" method="post" action="contact.php">
 <div class="large-6 columns">
   <input class="textfield" type="text" name="last_name" id="name" placeholder="Name" />
   <input type="text" name="email" id="email" placeholder="E-Mail Adresse" value="" />
   </div>
   <div class="large-6 columns">
   <input type="text" name="first_name" id="vorname" placeholder="Vorname" />
   <input type="text" name="termin" id="wunschtermin" placeholder="Wunschtermin" />
</div>

    <ul>
      <input id="checkbox1" type="checkbox"> 
      <p style="float:left;">Ja, ich möchte den<br> 
<b>we</b>learning-Newsletter abonnieren<br> und immer auf dem Laufenden<br> bleiben.<br></p>
      <input type="submit" class="submit" class="button" id="submit" value="Absenden" />

    </ul>

  </div> 
  </div>
</form>

这是我的 php 代码:

<?php
if(isset($_POST['email'])) {

// CHANGE THE TWO LINES BELOW
$email_to = "dierig@be-virtual.org";

$email_subject = "website html form submissions";


function died($error) {
    // your error code can go here
    echo "We are very sorry, but there were error(s) found with the  form you submitted. ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors.<br /><br />";
    die();
}

// validation expected data exists
if(!isset($_POST['first_name']) ||
    !isset($_POST['last_name']) ||
    !isset($_POST['email']) ||
    !isset($_POST['termin'])) {
    died('We are sorry, but there appears to be a problem with the form you submitted.');       
}

$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$termin = $_POST['termin']; // not required

$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
 if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
 $string_exp = "/^[A-Za-z .'-]+$/";
 if(!preg_match($string_exp,$first_name)) {
 $error_message .= 'The First Name you entered does not appear to be    
valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be  valid.<br />';
}
 if(strlen($error_message) > 0) {
died($error_message);
}
 $email_message = "Form details below.\n\n";

function clean_string($string) {
  $bad = array("content-type","bcc:","to:","cc:","href");
  return str_replace($bad,"",$string);
}

$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "termin: ".clean_string($termin)."\n";


 // create email headers
 $headers = 'From: '.$email_from."\r\n".
 'Reply-To: '.$email_from."\r\n" .
 'X-Mailer: PHP/' . phpversion();
 @mail($email_to, $email_subject, $email_message, $headers);  
 ?>

<div class="thankyou">
Vielen Dank! Wir werden uns umgehend mit Ihnen in Verbindung setzen.
Sie werden jeden Moment weitergeleitet.
</div>



<?php
header("refresh:1;index.html");
}
die();
?>

谁能告诉我如何实现我的想法？

Answer 1

AJAX 正是您所需要的。我通常让服务器处理数据解析和验证。这会做你想做的。只需将表单数据传递到请求的页面即可

function submitComment(formData)
{
    var form = $("#comment_form"),
    message = $("#message");

      $.ajax({
        url: form.attr('action'),
        type: 'post',
        dataType: 'json',
        data: formData,
        success: function(data, status, xhr) {
            if(data.error)
            {
                ...
                Error on page requested
                ...
            }
            else
            {
                ...
                No error on page requested
                ...
            }
        },
        error: function(xhr, status, errorThrown) {
            message.removeClass().addClass('error').html("There was an error processing the form! Error: " + status + " " + errorThrown + "<br>").fadeIn();
        }
    });
}