javascript - 文本交换后保存文本

Question

我正在创建一份运输状态报告，但我想要完成的任务，我似乎无法弄清楚。在我的报告表中，我有一个按钮，它显示“标记为已发货”。如果我单击该按钮，它会更改为“已发货”。这对我来说只是一种简单的报告方法。

我正在像这样进行文本交换...

<script>
//Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
$("button").on("click", function(e) {
    e.preventDefault()
    var el = $(this);
    el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});
</script>

我必须添加

e.preventDefault()

进入代码，因为单击按钮后页面会重新加载。

我遇到的问题之一是它不允许我回到原来的版本。我尝试将 e.preventDefault() 移至该代码的底部，但没有帮助。

现在我的问题的主要部分是我希望在选择它后能够保存它。我不确定我是否必须重新开始我正在做的事情，将其存放在数据库中，或者我是否可以使用现有代码来完成它......不过，我绝对需要它在选择后保存。

然后是最后一件事。我不知道如何只按一个按钮来做到这一点。我知道如何用 php 做到这一点，但我对 JS 很陌生。

当我选择“标记为已发货”时，我希望在 td 行中添加 d - t -y 的时间戳和时间。这可以用 JS 实现吗？

我正在寻找能够完成这一切的方法。我查遍了，似乎找不到任何与我想要的类似的东西。

有什么想法吗？

更新

我按照指示将其全部添加到同一个脚本中。现在我的按钮根本没有改变，也没有任何内容发送到数据库。

<script>
$.ajax({
    url: "shippingStatusSend.php",
    data: {action: "Shipped", order: order_id},
    type: "POST",
    dataType: "text"
}).done(function(r){
    //Do your code for changing the button here.
    //Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
$("button").on("click", function(e) {
    e.preventDefault()
    var el = $(this);
    el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});
});

</script>

名为 ShippingStatusSend.php 的 PHP 页面

我刚刚开始学习如何做准备好的陈述，所以这也可能是一个问题。

<?php
//connection to db
$con = mysqli_connect("localhost", "root", "", "bfb"); 

//Check for errors  
if (mysqli_connect_errno()) {
    printf ("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
    $order_id = trim($_POST['order_id'] );
    $status = trim($_POST['action'] );

/* create a prepared statement */
if ($stmt = mysqli_prepare($con, "INSERT INTO shippingStatus (order_id, status, date_Shipped) VALUES (?, ?, NOW())")) {

/* bind parameters for markers */
            $stmt->bind_param('is', $order_id, $status);

            /* execute query */
            $stmt->execute();


        /* close statement */
        mysqli_stmt_close($stmt);
            }
 ?>     

Answer 1

为了使 JavaScript 更改静态化，您需要使用某些服务器端，例如使用 PHP 将更改存储在数据库中。

为此，您需要使用 AJAX，这对于 jQuery 来说很容易:

$.ajax({
    url: "example.php",
    data: {action: "Shipped", order: orderID},
    type: "POST",
    dataType: "text"
}).done(function(r){
    //Do your code for changing the button here.
});

将 example.php 更改为将在服务器端进行更改的 PHP 脚本，并确保传递要更改的订单的 orderID。在 PHP 文件中，您可以访问 $_POST['action'] 和 $_POST['order'] 从 JavaScript 获取信息。

然后在 done 部分(AJAX 完成后调用)，您可以更新按钮。为了安全起见，您还可以在那里进行一些错误检查。 r 变量可用于 PHP 文件中的任何响应数据(例如，如果您在 PHP 中回显“Done”，r 将等于“Done”)。

编辑

根据您更新的问题/代码，您的问题是您在页面加载时创建 AJAX 调用，而不是在单击按钮时创建 AJAX 调用。将其更改为:

$("button").on("click", function(e) {
    e.preventDefault();
    var el = $(this);
    $.ajax({
        url: "shippingStatusSend.php",
        data: {action: "Shipped", order: order_id},
        type: "POST",
        dataType: "text"
    }).fail(function(e,t,m){
        console.log(e,t,m); 
    }).done(function(r){
        //Do your code for changing the button here.
        //Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
        el.text() == el.data("text-swap") 
        ? el.text(el.data("text-original")) 
        : el.text(el.data("text-swap"));
    });
});

更新要获取 order_id，您需要将其存储在 DOM 中的某个位置。根据您的评论，您将其放在:

<td class="tdproduct"><?php echo $row['order_id']; ?> </td>

所以类似:

var order_id = $('.tdproduct').text();

将获取 id，但前提是您只有一个属于该类的元素。否则，您将不得不存储一些其他独特的元素来获取。

重新加载时保存

将值保存在数据库中后，您需要让 PHP 在页面加载时呈现它。使用 PHP echo 或 print 从数据库输出信息，而不是让静态 html 显示标记为已发货。