AJAX表单提交，仅用于防止页面刷新，仅此而已
[英]AJAX form submission, solely to prevent page refresh and nothing else
问题描述
我建立了一个简单的HTML / PHP电子邮件注册表单，该表单显示在我的网站的页脚区域中。 只有两个字段： email和country 。
该表格非常适合我的目的。 数据收集，验证，清理，错误处理，清除字段，成功通知等-一切顺利！
我的最后一步是实现AJAX以防止页面刷新。 这是AJAX所需的全部。
我发现该站点上的所有教程，文章和相关问题的答案都提供了包含已使用PHP处理过的功能的代码。
我已经达到了AJAX提交的要求，可以正常工作。 页面没有刷新，用户输入已插入数据库，并且我收到确认电子邮件。
我希望获得一些指导（或指向教程的链接），它们可以帮助我实现PHP错误逻辑并回显PHP成功/错误消息。
HTML
<form action="process_footer_form/" method="post" id="footer-form">
<ul>
<li>
<input type="email" name="email" id="email"
value="<?php if (isset($email)) {echo $email;} ?>">
</li>
<li>
<input type="text" name="country" id="country"
value="<?php if (isset($country)) {echo $country;} ?>">
</li>
<li>
<input type="submit" name="submit" id="submit">
</li>
</ul>
<?php if (isset($success_message)) {echo $success_message;} ?>
<?php if (isset($error_message)) {echo $error_message;} ?>
</form>
JQuery的
$(function() {
// identify form
var form = $('#footer-form');
// create event listener
$(form).submit(function(event) {
// disable html submit button
event.preventDefault();
// serialize form data
var formData = $(form).serialize();
// submit form using AJAX
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// 1. echo PHP success message
// 2. fire PHP clear fields command
})
.fail(function(data) {
// 3. execute PHP error logic here
// 4. echo PHP error messages
});
});
});
PHP
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Load PHPMailer
require 'PHPMailer/PHPMailerAutoload.php';
// Create PHPMailer session
$mail = new PHPMailer;
$mail->CharSet = "UTF-8";
// SMTP settings
$mail->isSMTP();
$mail->Host = 'smtp.xxxxxxxxxx.com';
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->Username = 'xxxxxxxxxxxxxxxxxx';
$mail->Password = 'xxxxxxxxxxxxxxxxxx';
$mail->setFrom('xxxxxxxxxxxxxxxxxx' , 'xxxxxxxxxxxxxxxxxx');
$mail->addAddress('xxxxxxxxxxxxxxxxxx');
$mail->isHTML(true);
// Sanitize & Validate Input
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$country = trim(filter_input(INPUT_POST, 'country', FILTER_SANITIZE_SPECIAL_CHARS));
// set connection to mysql server
$connection = mysql_connect("localhost","xxxxxxxxxxxxxxxxxx","xxxxxxxxxxxxxxxxxx");
// connect to database
mysql_select_db("xxxxxxxxxxxxxxxxxx", $connection);
// insert user input to table
$sql = "INSERT INTO email_subscribers (email,country) VALUES ('$email','$country')";
if (!$connection) {
$error_message = <<<ERROR
<div>ERROR. Form not sent. Please try again or <a href="contact/">contact us</a>.</div>
ERROR;
// Send error notice to host
$mail->Subject = 'Website Error - Footer Form';
$mail->Body = ("Error Notice: A site user is having trouble on the footer form.");
$mail->send();
} else {
// run query
mysql_query($sql, $connection);
$success_message = <<<CONFIRMATION
<div>Subscription complete. Thank you!</div>
CONFIRMATION;
mysql_close($connection);
// Send confirmation notice to host.
$message = <<<HTML
<span>E-mail: {$email}</span><br>
<span>Country: {$country}</span>
HTML;
$mail->Subject = 'New E-mail Subscriber - Footer Form';
$mail->Body = $message;
$mail->send();
unset($email, $country);
}
} else {
header('Location: http://www.mywebsite.com/');
exit;
}
?>
3 个解决方案
解决方案1
1 2015-06-06 20:59:58
您可以尝试使用FormData对象简化生活。 然后您的代码可能看起来像这样。 我已经测试过了。
<form method="POST" id="subscription-form" enctype="multipart/form-data">
<input type="email" name="email" id="email" value="gulliver@tinyletter.com">
<input type="text" name="country" id="country" value="Lilliput">
<input type="button" value="submit" id="form-submit">
</form>
在此之下，您可以在div中显示消息：
<div id="messages"></div>
然后，您的jquery / javascript将如下所示：
<script>
(function(){
$("#form-submit").on("click", function(){ submitForm();});
})();
function submitForm(){
var form = document.getElementById("subscription-form");
var fd = new FormData(form);
$.ajax({
url: './PHPscript.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
$("#messages").html(data);
}
});
}
</script>
关于让PHP“处理消息”，我认为您缺少有关AJAX的知识。
在您最初的PHP页面中，您将加载PHP生成的html，然后完成PHPs部分。 进行AJAX调用时，您正在要求服务器执行其他PHP脚本，然后将该脚本的输出返回给javascript。
那时，您需要将PHP生成的任何消息放回当前页面，该消息尚未并且不会重新加载。 这首先是使用AJAX的目的。 这就是“邮件” div的目的。
为了完全理解这一点，请创建一个非常简单的PHPscript.php文件，如下所示并尝试一下：
<?php
print $_POST['email'] . ' ' . $_POST['country'];
?>
您将在该消息div中的当前页面中看到返回的值。
解决方案2
0 2015-06-06 20:20:49
第一个请求，例如www.mysite.com/something.php将运行PHP并将结果转储到页面中。 Ajax不能这样工作。 您将request到PHP文件，然后发送response ，然后您可以检查该response并执行某些操作。
如果ajax响应像初始加载一样将其内容转储到页面中，则会发生混乱。
尝试这样的事情：
$.ajax({
url: url,
type: type,
data: data
}).done(function (response) {
console.log(response);
});
然后在控制台中添加一个外观，看看您从PHP脚本中获得了什么好处。 然后构建该.done回调以处理您的请求结果并确定要执行的操作。
解决方案3
0 2015-06-06 20:27:04
好的，首先， var that = this当您丢失上下文时， var that = this是一个把戏，但是在不使用它的地方，您可能会丢失它..所以就算了:)
然后，您的find().each() ，这是获取值的好方法，但是jquery提供了一个$( this ).serializeArray() （它确实正是您想要的方法）
另外，您使用ajax发送数据，但是没有回调。 一旦一切正常，您的ajax调用至少需要有一个函数可以调用。 这是通过done()
最后，在大多数情况下，返回false会取消该事件，但是您最好使用preventDefault()因为它会禁用默认行为，但仍会传播事件（对于其他处理程序）。
总结一下：
$('form.ajax').submit( function(event) {
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serializeArray()
}).done(function(data) {
alert("Ajax call successful");
console.log("Server answer:" + data);
});
event.preventDefault();
});
编辑：Nvm我的第一句话，我最近了解您的that = this东西。
如何使用页面刷新来提交AJAX表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.