如何让ajax调用只执行一次功能?

我每隔60秒刷新一次页面,将新的状态添加到我的div中。然而,在订单下达后,我有一个 “等待 “状态。我不希望在管理员改变状态之前,每隔60秒就将相同的状态添加到我的div中。我该如何实现呢?另外,如果我在一段时间后打开页面,是否可以有附加的状态?例如,如果status=’Preparation’,我希望每当我打开页面时,就会出现’Waiting’,’Confirmed’。谢谢你

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

</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'];


     if ($orderStatus=='Waiting')
     {
        echo "<div style='height:200px; width:200px; text-align: center'>
                <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                  <h6>WAITING FOR CONFIRMATION</h6>
              </div>";


     }

}

解决方案:

let status = '<li>PENDING</li>';

var updateStatus = function(){
  $('#status').html('');
  $('#status').append(status);
  setTimeout(updateStatus,6000);
}

updateStatus();

$(document).on('click','#changeStatus',function(){
status = '<li>ACCEPTED</li><li>PENDING</li>';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="status">
</ul>

<button type="button" id="changeStatus">Mark as ACCEPTED</button>

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/3355.html

(0)
上一篇 2022年6月29日 下午4:30
下一篇 2022年6月29日 下午4:30

相关推荐

发表评论

登录后才能评论