更新数据库中表的特定字段后，如何使用 ajax 自动更新页面？

Question

我正在编写一个餐厅应用程序，客户可以在其中通过网页订购食物。 我遇到的问题是当客户完成订购食物时，网络将输出订单尚未支付，直到客户将其支付给餐厅工作人员并且餐厅工作人员从另一台设备更新数据库中的订单。 我希望这个网页不断检查具有相同“order_id”的数据库并检查“状态”字段。 状态字段将具有整数值（0=未付款，1=已付款） 这就是排序的工作原理

• 家伙从家伙的设备订购食物
• 家伙点击了“完成”
• 订单被放置在一个表数据库中，其字段集就像这样 ("order_id","order_status")
• 男的网页输出“等待付款”
• 人付钱给工作人员
• 工作人员从另一台设备将“order_status”从 0 更新为 1
• guy的网页自动输出“Payment Received”并显示返回home.php的按钮

这是我的网页

<div class="modal-header">
  <h5 class="modal-title" id="">Waiting for payment</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  <p class="h5">Transaction is on going <span class='spinner-border spinner-border-sm'></span></p>
  <p class='h5'>total price = Rp. <?php echo $_SESSION['totalprice'];?> ,-</p>
  <div class="overflow-auto mb-3" style="height: 400px;">
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
</div>

我打算为此使用 ajax，但我对 ajax 真的很陌生，而另一个线程似乎不是我想要的，因为它涉及按钮单击或用户的输入，但我希望这是真实的时间并且没有来自客户的任何输入。我使用 mysql 作为数据库。

Answer 1

您的 AJAX 调用可以使用 Javascript 恰当命名的 setInterval() 函数以设定的时间间隔进行。

在 Window 和 Worker 接口上提供的 setInterval() 方法重复调用函数或执行代码 sn-p，每次调用之间有固定的时间延迟。

此方法返回一个间隔 ID，它唯一地标识 间隔，因此您可以稍后通过调用 clearInterval() 将其删除。

MDN setInterval()

Answer 2

嗯，你会处理类似的事情

<script>
function checkOrderStatus(){
     // Instantiate an new XHR Object
        const xhr = new XMLHttpRequest();
  
        // we call the file responsible for checking the db
        xhr.open("GET","check_order.php", true);
  
        // When response is ready
        xhr.onload = function () {
            if (this.status === 200) {  
                // we check the data return 
                if(this.responseText === 1){
                    // Getting the element where we will display our response message
                let feedback = getElementsByClassName("h5");
                feedback.innerHTML = "Payment Received";
                clearInterval(timer); // we stop checking the database
                 } else {
                    console.log('Still waiting...');
               };              
                
            }
            else {
                console.log("Something went wrong!");
            }
        }
  
        // At last send the request
        xhr.send();
    }
}

// now we want call this function every 3 seconds
let timer = setInterval(() => checkOrderStatus(), 3000);

当然，您必须将订单 ID 附加到 check_order.php 的 url 或作为会话变量传递