如何每 60 秒刷新一次页面而不会丢失 div 中的现有数据？

Question

我正在实施一个食品状态跟踪器，其中每个订单都有一个订单号。

当页面加载时，我执行 AJAX 调用以获取订单的当前状态。此状态附加到我的div。现在，当我的管理员更改订单状态时，我希望将新状态附加到 div 而不会丢失当前状态。

我试过这样做，但是当我的页面重新加载时，过去的状态会丢失。

下面是部分代码：

<!-- I used this for page reload -->
<meta http-equiv="refresh" content="60"/>

<div id="progressbar" style="border:1px solid white;width:75%;margin:20px auto; display: flex; 
  padding:10px; flex-wrap: wrap;flex-direction: row; justify-content: space-around;">

</div>

<script>
    $(document).ready(function()
    {
        var orderNo = "<?php echo $orderNo; ?>"; 
        alert(orderNo);

        $.ajax({
            url:'action.php', 
            method:'post',
            data:{orderNo,orderNo},
            success:function(response)
            {
                $("#progressbar").append(response);
            }

        });

    });

</script>

然后在我的action.php 文件中：

// ORDER PROGRESS
if (isset($_POST['orderNo']))
{
    $orderNo=$_POST['orderNo'];

    $orderSt="SELECT O_Status from orders WHERE O_No='$orderNo'";

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $orderRes=$conn->query($orderSt);

     $orderRow=$orderRes->fetch(PDO::FETCH_ASSOC);
     $orderStatus=$orderRow['O_Status'];
     echo $orderStatus;

}

为了重新加载我使用的页面：

<meta http-equiv="refresh" content="60"/>

Answer 1

您可以每隔 60 秒进行一次 AJAX 调用，而不是重新加载整个页面。为了实现这一点，将 AJAX 调用放入一个函数中，并在 AJAX 请求的 success 回调中使用 setTimeout() 调用，以给定的延迟再次调用该函数。

jQuery($ => {
  var orderNo = "<?php echo $orderNo; ?>";

  function getData() {
    $.ajax({
      url: 'action.php',
      method: 'post',
      data: {
        orderNo: orderNo
      },
      success: function(response) {
        $("#progressbar").append(response);
        setTimeout(getData, 60000); // repeat in 60 secs, if AJAX was successful
      }
    });
  }

  getData(); // on load
});

请注意，您提供的对象中的键/值对需要用: 分隔，而不是,。我认为这只是问题中的一个错字。