PHP形式ajax“成功与失败”的消息
我网站上的表格是一个简单的联系表格。 当表单发送/失败而不重新加载页面时，我希望表单在同一页面上显示“成功与失败”消息。 我明白我应该使用Ajax来做到这一点，但是我无法实现它，因为我对此的了解很少。
这是我正在使用的代码。
Html（单页设计）：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<form class="form" id="contactus" action="" method="post" accept-charset="UTF-8">
<label for="nametag">Namn<FONT COLOR="#FF0060">*</FONT></label>
<input name="name" type="text" id="name" value="" />
<label for="emailtag">Email<FONT COLOR="#FF0060">*</FONT></label>
<input name="email" type="text" id="email" value="" />
<label for="phonetag">Telefon</label>
<input name="phone" type="text" id="phone" value="" />
<label for="messagetag">Meddelande<FONT COLOR="#FF0060">*</FONT></label></br>
<textarea name="message" id="message" style="width: 87%; height: 200px;"></textarea>
<label class="placeholder"> </label>
<button class="submit" name="submit">Skicka</button>
</form>
<script>
$(function() {
$('#contactus').submit(function (event) {
event.preventDefault();
event.returnValue = false;
$.ajax({
type: 'POST',
url: 'php/mail.php',
data: $('#contactus').serialize(),
success: function(res) {alert(res);
if (res == 'successful') {
$('#status').html('Sent').slideDown();
}
else {
$('#status').html('Failed').slideDown();
}
},
error: function () {
$('#status').html('Failed').slideDown();
}
});
});
});
</script>
PHP的：
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$recipient = "info@mydomain.com";
$subject = "Webbkontakt";
$formcontent = "Från: $name <br/> Email: $email <br/> Telefon: $phone <br/> Meddelande: $message";
$headers = "From: " ."CAMAXON<info@mydomain.com>" . "rn";
$headers .= "Reply-To: ". "no-reply@mydomain.com" . "rn";
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html; charset=utf-8rn";
if(mail($recipient, $subject, $formcontent, $headers))
{
echo "successful";
}
else
{
echo "error";
}
?>
您的Ajax呼叫无法正常工作。 尝试这个
$(function() {
$('#contactus').submit(function (event) {
event.preventDefault();
event.returnValue = false;
$.ajax({
type: 'POST',
url: 'php/mail.php',
data: $('#contactus').serialize(),
success: function(res) {
if (res == 'successful') {
$('#status').html('Sent').slideDown();
}
else {
$('#status').html('Failed').slideDown();
}
},
error: function () {
$('#status').html('Failed').slideDown();
}
});
});
});
你也可以看到我已经使用$('#contactus').serialize()这种方式你不需要逐个传递表单元素，而是serialize()会将整个表单元素传递到你的php页面
比你的PHP文件echo successful如果一切顺利其他echo error如果响应是一个error比显示error div
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$recipient = "info@mydomain.com";
$subject = "Webbkontakt";
$formcontent = "Från: $name <br/> Email: $email <br/> Telefon: $phone <br/> Meddelande: $message";
$headers = "From: " ."CAMAXON<info@mydomain.com>" . "rn";
$headers .= "Reply-To: ". "no-reply@mydomain.com" . "rn";
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html; charset=ISO-8859-1rn";
if(mail($recipient, $subject, $formcontent, $headers))
{
echo "successful";
}
else
{
echo "error";
}
?>
像这样改变你的PHP脚本：
<?php
if( isset( $_POST['submit'] )){ //checking if form was submitted
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$formcontent="Meddelande: nn $message";
$recipient = "info@mydomain.com";
$subject = "Webbkontakt";
$mailheader = "Från: $name n Email: $email n Telefon: $phone rn";
$mailsent = mail($recipient, $subject, $formcontent, $mailheader);
if($mailsent) echo "Success"; //success if mail was sent
else echo "Ett fel uppstod!";
}
?>
在你的PHP脚本中，你可以试试这个
if(mail($recipient, $subject, $formcontent, $mailheaders))
{
echo("Mail Sent Successfully"); // or echo(successful) in your case
}else{
echo("Mail Not Sent"); // or die("Ett fel uppstod!");
}