使用PHP和AJAX发送电子邮件表单
[英]Sending e-mail form using PHP and AJAX
问题描述
I have contact form on my site. 
我在我的网站上有联系表格。 It sends message to email. 它会向电子邮件发送消息。 I try to do it without page reload using AJAX, but it seems that AJAX doesn't work: messages are sent but the page still redirecting to call-form.php . 我尝试在没有使用AJAX的页面重新加载的情况下执行此操作，但似乎AJAX不起作用：发送消息但页面仍然重定向到call-form.php 。 What is incorrect in my code? 我的代码中有什么不对？ (jQuery is included) （包含jQuery）
HTML 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 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 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!");
}
});
});
});
4 个解决方案
解决方案1
6 已采纳 2015-05-27 21:17:08
Ok, first when you make an AJAX call, you must have a way to know if your PHP returns you something (useful for debugging). 好的，首先当你进行AJAX调用时，你必须要知道你的PHP是否会返回一些东西（对于调试很有用）。
Then, when submitting a form with AJAX, the tag action="" is not needed. 然后，当使用AJAX提交表单时，不需要标记action="" 。
Finally, to prevent a form from being sent when making an AJAX call, add e.preventDefault() with the event called e here, like in my example. 最后，为了防止在进行AJAX调用时发送表单，请在此处添加名为e的事件的e.preventDefault() ，就像在我的示例中一样。
I have improved your code to be more realistic about the latest standards. 我已经改进了您的代码，使其更加符合最新标准。
HTML : 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 : 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);
});
});
});
And PHP : 和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'));
}
With echo json_encode , you know what is the return of your AJAX call. 使用echo json_encode ，您知道AJAX调用的返回值。 It is better 这个比较好
解决方案2
4 2015-05-27 21:04:50
You're not preventing the default submit action - 您没有阻止默认的提交操作 -
$("#free-call-form").submit(function (event) { // capture the event
event.preventDefault(); // prevent the event's default action
解决方案3
2 2015-05-27 21:08:06
Returning false or preventing the default behavior of the event should work for you. 返回false或阻止事件的默认行为应该适合您。
Example with old .submit(), that now is an alias of .on('eventName'); 旧的.submit（）示例，现在是.on（'eventName'）的别名; and using return false to avoid form submission.; 并使用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;
});
Example using .on('eventName') and using e.preventDefault() to avoid form submission. 使用.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!");
}
});
});
From Jquery .submit() Documentation: This method is a shortcut for .on( "submit", handler ) in the first variation, > and .trigger( "submit" ) in the third.
Also, you would consider not using EVER the user input directly, it would not cause problems in this exact context (or maybe yes) but with your actual approach they can change the mail markup or adding some weirds things there, even scripts, you would consider escape, validate or limit it. 此外，您会考虑不直接使用EVER用户输入，它不会在这个确切的上下文中引起问题（或者可能是）但是根据您的实际方法，他们可以更改邮件标记或在那里添加一些奇怪的东西，甚至是脚本，你会考虑逃避，验证或限制它。
Also as zLen pointed out in the comments: 正如zLen在评论中指出的那样：
the action in the form markup is not necessary because you are not using it, you can remove it: 表单标记中的操作不是必需的，因为您没有使用它，您可以删除它：
action="<?php bloginfo(template_url); ?>/mail/call-form.php"
解决方案4
1 2015-05-27 21:03:51
What is happening is your form is being submitted, it's not actually the AJAX call which is doing it. 发生的事情是你的表单正在提交，实际上并不是正在进行的AJAX调用。 To fix it, add 要修复它，请添加
return false;
at the end of the submit function so that the browser doesn't submit the form and the AJAX call happens properly. 在submit函数的末尾，以便浏览器不提交表单并且AJAX调用正确发生。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.