我有一个基本的PHP联系表单，并将其process.php检查表单内容的文件。我让表单正常工作，但我想用$errors填充我的 returnstatusdiv 的内容，而无需完全刷新页面。我确定这是一项简单的任务，但我不确定如何去做。这是我的代码：
联系表格
<?php session_start(); ?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="contact-form" class="clearfix">
<h1>Get In Touch!</h1>
<img id="stamp" src="images/stamp.png" height="128" width="128" alt="Stamp"/>
<h2>
Please provide as much information as possible for me to help you with your enquiry
</h2>
<div id="returnstatus">
</div>
<form method="post" action="process2.php">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" placeholder="Joe Bloggs" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" placeholder="joebloggs@example.com" required="required" />
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 characters" required="required" data-minlength="20"></textarea>
<input type="text" name="check" class="check" />
<span id="loading"></span>
<input type="submit" value="Send!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</body>
<html>
过程2.php
<?php
$name = check_input($_POST['name']);
$email = check_input($_POST['email']);
$message = check_input($_POST['message']);
$errors = "";
if (empty($name)){
$errors .= "Please fill out the first name field <br/> ";
}
if (empty($email)){
$errors .= "Please fill out the email field <br/> ";
} else {
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+'.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email)) {
$errors .= 'The email address you entered does not appear to be valid<br />';
}
}
if (strlen($message) < 21){
$errors .= "Your message must be at least 20 characters";
}
if ($errors != "") {
echo "<b>Message not sent</b><br/>";
echo $errors;
} else {
$errors = "<p>Thank you, $name, for your message.</p><p>I'll get back to you as soon as possible!</p>";
echo $errors;
//send email if all is ok
if ($_POST['check'] == '') { //check to see if the hidden input entry is empty
$headers = "From: {$email}" . "'r'n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "'r'n";
$emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p>
<p><strong>Name: </strong> {$name} </p>
<p><strong>Email Address: </strong> {$email} </p>
<p><strong>Message: </strong> {$message} </p>";
mail("xxxxx@gmail.com","New Enquiry",$emailbody,$headers);
}
}
function check_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
显而易见的答案是发送 AJAX 请求。欲了解更多信息，请访问 MooTools 中的jQuery.post()或Request.HTML。下面的handleSuccess方法将 HTML 输出从process2.php注入到returnstatus 中。
mootools 1.4.5 示例
(function(){
var form = $$('#contact-form form')[0];
var returnStatus = $('returnstatus');
var handleSuccess = function(responseTree, responseElements, responseHTML, responseJavaScript) {
returnStatus.set('html', responseHTML);
};
form.addEvent('submit', function() {
new Request.HTML({
url: form.get('action'),
onSuccess: handleSuccess
}).post(form);
return false;
});
})();
jquery 1.7.2 示例
(function(){
var form = $('#contact-form form');
var returnStatus = $('#returnstatus');
var handleSuccess = function(data) {
returnStatus.html(data);
};
form.submit(function() {
$.post(form.attr('action'), form.serialize(), handleSuccess, 'html');
return false;
});
})();
你需要发送 AJAX 请求，使用 jQuery 库你可以序列化表单数据并向进程发送一个 $.post 2.php