使表单提交不重新加载页面

Question

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

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

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

如果有办法用 PHP/HTML 做到这一点 - 我很乐意提供有关此方法的指导。
如果唯一的答案是 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，这是我的下一个学习清单。我知道他们会让这个问题更容易解决。

更新——我花了一些时间在 link 的帖子上，表明这是 link 的重复问题。我确实明白为什么......但它与我要问的内容或 link 中给出的答案的核心不同。我认为 link 可能是问题的 "an" 答案 - 但我对无需使用 jQuery 和 AJAX 即可解决问题的任何方法感兴趣 - 如果那是不可避免的，然后是 AJAX 如何适合我的代码和这种特定情况。我同样认为这与 link 不同，因为我的按钮填充了 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 将允许您发送 and/or 从服务器 "behind the scenes" 检索数据而不影响您的页面。

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. It is a generic method, and we could as well have used $.post, since we are specifically doing the POST request 中的 $.ajax 方法发送实际的 Ajax 请求。它将由您的 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。

希望对您有所帮助！

使表单提交不重新加载页面

Making a form submit NOT reload the page

php

forms

jquery

reload