[英]How to refresh page every 60 seconds without losing existing data in div?
我正在实施一个食品状态跟踪器,其中每个订单都有一个订单号。
当页面加载时,我执行 AJAX 调用以获取订单的当前状态。 此状态附加到我的div
。 现在,当我的管理员将更改订单状态时,我希望将新状态 append 到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"/>
您可以每隔 60 秒调用一次 AJAX 而不是重新加载整个页面。 To achieve that put the AJAX call in a function and use a setTimeout()
call in the success
callback of the AJAX request to invoke the function again with the given delay.
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
});
请注意,您提供的 object 中的键/值对需要用:
分隔,而不是,
。 我认为这只是问题中的一个错字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.