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

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

当页面加载时，我执行AJAX调用以获取订单的当前状态。此状态附加到my

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>

对于重新加载我使用的页面：

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

---

您可以每60秒调用一次AJAX，而不是重新加载整个页面。要实现这一点，请将AJAX调用放在函数中，并在AJAX请求的

success

回调中使用

setTimeout（）

调用，以给定的延迟再次调用函数

jQuery（$=>{
var orderNo=“”；
函数getData（）{
$.ajax({
url:'action.php'，
方法：“post”，
数据：{
订单号：订单号
},
成功：功能（响应）{
$（“#progressbar”）。追加（回复）；
setTimeout（getData，60000）；//如果AJAX成功，请在60秒内重复
}
});
}
getData（）；//正在加载
});

---

请注意，您提供的对象中的键/值对需要用

：

分隔，而不是用

，

分隔。我想这只是问题中的一个输入错误。

您可以每60秒调用一次AJAX，而不是重新加载整个页面。要实现这一点，请将AJAX调用放在函数中，并在AJAX请求的

success

回调中使用

setTimeout（）

调用，以给定的延迟再次调用函数

jQuery（$=>{
var orderNo=“”；
函数getData（）{
$.ajax({
url:'action.php'，
方法：“post”，
数据：{
订单号：订单号
},
成功：功能（响应）{
$（“#progressbar”）。追加（回复）；
setTimeout（getData，60000）；//如果AJAX成功，请在60秒内重复
}
});
}
getData（）；//正在加载
});

---

请注意，您提供的对象中的键/值对需要用

：

分隔，而不是用

，

分隔。我想这只是问题中的一个输入错误。

您需要保存服务器上的所有stati，并在一次调用中返回所有stati。如果用户想在另一台计算机上查看他的状态怎么办？@mplungjan是的，他可以，因为我正在跟踪我的用户id，即他已经在系统上注册了。为什么不再次发送AJAX请求，而不是重新加载整个页面呢？@rorymcrossan是的，我想到了。我不知道怎么做，虽然我在下面为您添加了一个示例。您需要保存服务器上的所有站点，并在一次调用中返回所有站点。如果用户想在另一台计算机上查看他的状态怎么办？@mplungjan是的，他可以，因为我正在跟踪我的用户id，即他已经在系统上注册了。为什么不再次发送AJAX请求，而不是重新加载整个页面呢？@rorymcrossan是的，我想到了。我不知道怎么做，虽然我给你在地下加了个例子！！：D它起作用了！！谢谢然而，我真的不明白其中的逻辑。你能给我解释一下getData是如何工作的吗？我的页面一加载，setTimeout就被调用了。在document.ready处理程序中调用了

getData（）

，页面一加载，函数就被调用了。然后，在AJAX请求的

success

处理程序中（每当AJAX请求成功完成时都会调用该处理程序），定义了将再次调用

getData（）。这会导致从正在查找的服务器检索数据的无限循环。好的，谢谢。。但是我的状态会被重复吗？我该怎么解决呢？天才！！：D它起作用了！！谢谢然而，我真的不明白其中的逻辑。你能给我解释一下getData是如何工作的吗？我的页面一加载，setTimeout就被调用了。在document.ready处理程序中调用了
getData（）
，页面一加载，函数就被调用了。然后，在AJAX请求的
success
处理程序中（每当AJAX请求成功完成时都会调用该处理程序），定义了将再次调用
getData（）。这会导致从正在查找的服务器检索数据的无限循环。好的，谢谢。。但是我的状态会被重复吗？我该如何解决这个问题？
<meta http-equiv="refresh" content="60"/>