[英]Sending e-mail form using PHP and AJAX
我在我的网站上有联系表格。 它会向电子邮件发送消息。 我尝试在没有使用AJAX的页面重新加载的情况下执行此操作,但似乎AJAX不起作用:发送消息但页面仍然重定向到call-form.php
。 我的代码中有什么不对? (包含jQuery)
HTML
<form name="freeCall" action="<?php bloginfo(template_url); ?>/mail/call-form.php" method="post" class="popover-form" id="free-call-form">
<label for="name1">Name</label><span class="pull-right close">×</span><input placeholder="Name" name="call-name" type="text" id="name1" >
<label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >
<input type="submit" value="Call me back" >
</form>
PHP - call-form.php
<?
if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){
$to = 'test@gmail.com';
$subject = 'Callback';
$message = '
<html>
<head>
<title>Call me back</title>
</head>
<body>
<p><b>Name:</b> '.$_POST['call-name'].'</p>
<p><b>Phonenum:</b> '.$_POST['phone'].'</p>
</body>
</html>';
$headers = "Content-type: text/html; charset=utf-8 \r\n";
$headers .= "From: Site <info@mail.com>\r\n";
mail($to, $subject, $message, $headers);
}
?>
JS
$(function () {
$("#free-call-form").submit(function () {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: "call-form.php",
data: form_data,
success: function () {
alert("It's OK!");
}
});
});
});
好的,首先当你进行AJAX调用时,你必须要知道你的PHP是否会返回一些东西(对于调试很有用)。
然后,当使用AJAX提交表单时,不需要标记action=""
。
最后,为了防止在进行AJAX调用时发送表单,请在此处添加名为e
的事件的e.preventDefault()
,就像在我的示例中一样。
我已经改进了您的代码,使其更加符合最新标准。
HTML:
<form name="freeCall" method="post" class="popover-form" id="free-call-form">
<label for="name1">Name</label><span class="pull-right close">×</span><input placeholder="Name" name="call-name" type="text" id="name1" >
<label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >
<input type="submit" value="Call me back" >
JS:
$(function () {
$("#free-call-form").submit(function (e) {
e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: "call-form.php",
dataType: "json", // Add datatype
data: form_data
}).done(function (data) {
console.log(data);
alert("It's OK!");
}).fail(function (data) {
console.log(data);
});
});
});
和PHP:
if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){
$to = 'test@gmail.com';
$subject = 'Callback';
$message = '
<html>
<head>
<title>Call me back</title>
</head>
<body>
<p><b>Name:</b> '.$_POST['call-name'].'</p>
<p><b>Phonenum:</b> '.$_POST['phone'].'</p>
</body>
</html>';
$headers = "Content-type: text/html; charset=utf-8 \r\n";
$headers .= "From: Site <info@mail.com>\r\n";
mail($to, $subject, $message, $headers);
echo json_encode(array('status' => 'success'));
} else {
echo json_encode(array('status' => 'error'));
}
使用echo json_encode
,您知道AJAX调用的返回值。 这个比较好
您没有阻止默认的提交操作 -
$("#free-call-form").submit(function (event) { // capture the event
event.preventDefault(); // prevent the event's default action
返回false或阻止事件的默认行为应该适合您。
旧的.submit()示例,现在是.on('eventName')的别名; 并使用return false来避免表单提交。
$("#free-call-form").submit(function () {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: "call-form.php",
data: form_data,
success: function () {
alert("It's OK!");
}
});
return false;
});
使用.on('eventName')并使用e.preventDefault()来避免表单提交的示例。
$("#free-call-form").on('submit', function (e) {
e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: "call-form.php",
data: form_data,
success: function () {
alert("It's OK!");
}
});
});
来自Jquery .submit()文档:此方法是第一个变体中的.on(“submit”,handler)和第三个变体中的.trigger(“submit”)的快捷方式。
此外,您会考虑不直接使用EVER用户输入,它不会在这个确切的上下文中引起问题(或者可能是)但是根据您的实际方法,他们可以更改邮件标记或在那里添加一些奇怪的东西,甚至是脚本,你会考虑逃避,验证或限制它。
正如zLen在评论中指出的那样:
表单标记中的操作不是必需的,因为您没有使用它,您可以删除它:
action="<?php bloginfo(template_url); ?>/mail/call-form.php"
发生的事情是你的表单正在提交,实际上并不是正在进行的AJAX调用。 要修复它,请添加
return false;
在submit
函数的末尾,以便浏览器不提交表单并且AJAX调用正确发生。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.