javascript - AJAX表单提交，仅用于防止页面刷新，仅此而已-6ren

javascript - AJAX表单提交，仅用于防止页面刷新，仅此而已

转载作者：行者123 更新时间：2023-12-03 09:57:23

33

4

我已经构建了一个简单的 HTML/PHP 电子邮件注册表单，该注册表单显示在我网站的页脚区域中。只有两个字段:电子邮件和国家/地区。

该表单非常适合我的目的。数据收集、验证、清理、错误处理、清除字段、成功通知等——一切都好!

我的最后一步是实现 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;

}
?>

最佳答案

您可以尝试使用 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，然后 PHP 部分就完成了。当您进行 AJAX 调用时，您要求服务器执行不同的 PHP 脚本，然后将该脚本的输出返回给 javascript。

此时，您需要将 PHP 生成的任何消息放回当前页面，该页面没有也不会重新加载。这就是使用 AJAX 的首要目的。这就是“messages”div 的用途。

作为完全理解这一点的一种方式，创建一个非常简单的 PHPscript.php 文件，如下所示并尝试一下:

<?php
print $_POST['email'] . ' ' . $_POST['country'];
?>

您将在该消息 div 内的当前页面中看到返回的值。

关于javascript - AJAX表单提交，仅用于防止页面刷新，仅此而已，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30687143/

33

4

0

文章推荐： javascript - 如何递归调用这个函数？

文章推荐： javascript - 检测是否安装了 Chrome 扩展

文章推荐： JMS 和 ESB - 它们是如何相关的？

文章推荐： javascript - 如何阻止 Angular 清除文本选择？

ajax - Comet, Ajax Push, Reverse Ajax
有人有 Comet 应用程序 .net 的任何样本吗？我需要一个示例如何在服务器中保持客户端的连接？最佳答案这里也有一些不错的: http://www.frozenmountain.com/we
ajax - Yii2:ajax 提交表单上的 ajax 表单验证
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。我正在处理一个促销代码输入表单，用户
ajax - Ajax 和 Jquery-Ajax 之间的区别
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
ajax - f :ajax and a4j:ajax? 和有什么区别吗
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未
ajax - 在 $.ajax() 中将数组传递给 ajax 请求
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
ajax - jQuery.ajax 和 $.ajax 是一样的吗？
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
ajax - Ajax 会降低性能吗？
过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？最佳答案过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果
ajax - 使用 Ext.Ajax.request 的跨域 Ajax
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。这是我的代码: {
ajax - AJAX 调用后的渲染问题
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情
ajax - Ajax 库的比较
任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。请注意，我不是在要求“我认为 XXX 很棒”——我正
ajax - 哪些情况下不应使用 AJAX？
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。可能是为了 UX，AJAX 向站点/
ajax - ajax 页面的永久链接最佳实践
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在我希望地址栏始终包含当前(自定义) V
ajax - 我是否正确理解了 Ajax？
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服
ajax - AJAX 可以提交基本身份验证的凭据吗？
这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
ajax - AJAX 检查用户名功能的安全性
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
ajax - Ajax 发布后重定向
我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
ajax - Jquery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执
ajax - AJAX 请求时禁用按钮
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
ajax - RAILS 6 Ajax 事件和 Ajax Spinner
我试图在每个 Ajax 请求上显示加载动画/微调器我的 application.js $(document).on("turbolinks:load", function() { window.
ajax - ajax settimeout刷新div
我正在显示使用jQplot监视数据的图形。为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。在服务器上，PHP脚本从数据库中检索数据。成功后，将在5

首页

博学

6Ren·AI

商城

javascript - AJAX表单提交，仅用于防止页面刷新，仅此而已