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，它是我学习列表的下一个。我知道他们会让这个问题更容易解决。

更新 - 我花了一些时间发布链接，表明这是链接的重复问题。我确实知道为什么......但这与我所要求的内容或链接中给出的答案不同。我认为链接可能是问题的“答案” - 但我对任何解决问题的方法感兴趣而不必使用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

为了从客户端执行服务器端脚本（PHP）（静态HTML和JavaScript），您需要使用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。

希望这有帮助！

制作表单提交不会重新加载页面

1 个答案: