时间戳

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

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

问题描述

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

当页面加载时，我执行 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"/>

标签： phpjqueryajaxweb

解决方案

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

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
});

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

推荐阅读