提交表单不重新加载页面

Question

我仍在学习正确且更有效的代码编写方法 - 目前我被困在当前的问题上。

我有一个当前工作正常的表单 - 写入 sql 数据库，然后重新加载当前页面。我希望表单不重新加载页面。

我知道有一种方法可以使用 jQuery 和 Ajax 来做到这一点——老实说，我对这些还不是很熟练。

1. 如果有办法用 PHP/HTML 做到这一点 - 我会喜欢这种方法的指导。

2. 如果唯一的答案是 Java 和 Ajax - 我希望能获得有关更改此表单以不重新加载页面的特定实例的指导。

按钮外观的屏幕截图 - 三种颜色代表跟踪发票付款的 3 个阶段。单击时红色变为黄色，黄色变为绿色，绿色变为红色（以防点击错误）。

这是我的表单的前端代码：

    <form action="jump_invoicepaid.php" method="post">
    <input type="hidden" name="invoicepaid" value="'.$projectid.'">');                        
if ($projectpaid == 2) {
           echo('<button type="submit" name="action" class="greenbutton" value="unpaid">Paid</button></form>');
} else if ($projectpaid == 1) {
           echo('<button type="submit" name="action" class="yellowbutton" value="paid">Paid</button></form>');
    } else {
           echo('<button type="submit" name="action" class="redbutton" value="sent">Paid</button></form>');
}          

这是我的表单的后端代码：

if ($_POST['action'] == paid) {
   ///marking project as paid       
include_once('toolbox.php');
$projectid = $_POST['invoicepaid'];
mysqli_query($con, "UPDATE kmis_projects SET project_paid='2' WHERE project_id= '$projectid'");
header('Location: ./?page=pastevents');

} else if ($_POST['action'] == sent) {
       ///marking project as sent       
include_once('toolbox.php');
$projectid = $_POST['invoicepaid'];
mysqli_query($con, "UPDATE kmis_projects SET project_paid='1' WHERE project_id= '$projectid'");
header('Location: ./?page=pastevents');

} else if ($_POST['action'] == unpaid) {
       ///marking project as unpaid       
include_once('toolbox.php');
$projectid = $_POST['invoicepaid'];
mysqli_query($con, "UPDATE kmis_projects SET project_paid='0' WHERE project_id= '$projectid'");
header('Location: ./?page=pastevents');
}

我确实想全面学习 jQuery 和 ajax，这是我学习列表中的下一个。我知道他们会让这个问题更容易解决。

更新——我花了一些时间发布链接，表明这是链接的重复问题。我确实明白为什么......但它与我所问的内容或链接中给出的答案的核心不同。我认为该链接可能是该问题的“一个”答案——但我对任何无需使用 jQuery 和 AJAX 即可解决问题的方法感兴趣——如果这是不可避免的，那么特别是 AJAX 如何适合我的代码和这种具体情况。我同样认为这在链接中是独一无二的，因为我的按钮填充了 3 个不同的“if”检查，根据填充和单击的按钮写入不同的值。

更新 2 -- 这是我正在使用的当前代码。尽管看起来，ajax 并没有发送按钮的名称或值。

<script>
$( document ).ready(function() {
    $("button").click(function(e) {
        e.preventDefault(); // prevent page refresh

        $.ajax({
            type: "POST",
            url: "jump_invoicepaid.php",
            data: $(this).serialize(),   // serialize form data
            success: function(data) {
                window.location.replace("?page=pastevents");
            },
            error: function() {
                // Error ...
            }
        });
    });
});
</script>

<form action="">
           <input type="hidden" name="invoicepaid" value="'.$projectid.'">

if ($projectpaid == 2) {
           echo('<button type="submit" name="action" class="greenbutton" value="unpaid">Paid</button></form>');
} else if ($projectpaid == 1) {
           echo('<button type="submit" name="action" class="yellowbutton" value="paid">Paid</button></form>');
    } else {
           echo('<button type="submit" name="action" class="redbutton" value="sent">Paid</button></form>');
}           

Answer 1

为了从客户端（静态 HTML 和 JavaScript）执行服务器端脚本 (PHP)，您需要使用 Ajax 技术。从本质上讲，Ajax 将允许您在“幕后”从服务器发送和/或检索数据，而不会影响您的页面。

JavaScript 是一种用于向您的网页添加交互性的客户端脚本语言，它已经支持 Ajax。但是，语法相当冗长，因为您需要考虑浏览器及其版本之间的差异（尤其是 Internet Explorer 版本 5 到 11，它们自己的实现不同于 Chrome 或 Mozilla）。

作为开发人员，您可以通过使用前端 框架（例如 jQuery）来避免这些技术性问题（其他很好的例子是 Angular.js、Vue.js 等）。 jQuery 本质上是一个用 vanilla JavaScript 编写的代码库，它简化了查询 DOM 等常见任务。它还为使用 Ajax 提供了富有表现力的语法。它将在内部解决浏览器不兼容问题。这样您就可以专注于您的高级逻辑，而不是诸如此类的低级问题。

再一次，jQuery 代码也是 JavaScript 代码。因此，将下面的 <script> 标记（就像您通常对 JS 所做的那样）放置在页面中的某个位置。

<script>
$( document ).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault(); // prevent page refresh

        $.ajax({
            type: "POST",
            url: "jump_invoicepaid.php",
            data: $(this).serialize(), // serialize form data
            success: function(data) {
                // Success ...
            },
            error: function() {
                // Error ...
            }
        });
    });
});
</script>

首先，此代码将在页面为loaded 时运行。其次，它会将submit 事件处理程序附加到HTML 页面中的每个<form>。当您单击<button type='submit'> 时，将触发此事件。 e.preventDefault() 将停止正常提交表单并阻止页面刷新。请注意，e 是事件对象，其中包含有关 submit 事件的信息（例如它源自哪个元素）。

接下来，我们使用来自jQuery library 的$.ajax 方法发送实际的Ajax 请求。这是一个通用方法，我们也可以使用$.post，因为我们专门使用POST request。它将通过您的 PHP 文件jump_invoicepaid.php 接收。

现在，在您的 PHP 文件中，您有以下行：header('Location: ./?page=pastevents');，它使用 GET 参数强制重定向到主页。如果您想拥有相同的行为，那么您需要删除该行，并将 window.location.replace("/?page=pastevents") 放入您的 JavaScript 代码：

// in your Ajax request above...
success: function(data) {
    window.location.replace("/?page=pastevents");
},

然而，这会刷新页面，因为您实际上是使用 GET 方法请求主页。我猜这是为了更新页面上的信息。您可以通过在页面上添加/更改/删除元素（即在DOM 中）来执行此操作而无需重定向。这样，您可以将数据从服务器发送回客户端，如果成功接收到响应，您可以在 JavaScript 中获取该响应并相应地操作您的网页。

如果您对后者感兴趣，请考虑使用 JSON 格式。您只需要在 PHP 中执行 json_encode，然后在客户端使用 JSON.parse(...) 解析 JSON 字符串。例如阅读here。

希望这会有所帮助！