如何使用Ajax实现MySQL订单状态更新时前端页面自动刷新

你需要通过AJAX短轮询实现无触发的状态自动更新，整体分为3个步骤： #

步骤1：创建后端状态查询接口 #

新建check_order_status.php文件，负责查询数据库返回对应订单的支付状态，代码如下：

<?php
session_start();
// 替换为你自己的数据库连接配置
$host = 'localhost';
$dbname = '你的数据库名';
$username = '数据库用户名';
$password = '数据库密码';

header('Content-Type: application/json');
// 校验订单是否存在
if (!isset($_SESSION['order_id'])) {
    echo json_encode(['status' => -1, 'msg' => '订单不存在']);
    exit;
}
$order_id = $_SESSION['order_id'];

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    // 替换为你的实际订单表名
    $stmt = $pdo->prepare("SELECT order_status FROM 你的订单表名 WHERE order_id = ?");
    $stmt->execute([$order_id]);
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($result) {
        echo json_encode(['status' => $result['order_status']]);
    } else {
        echo json_encode(['status' => -1, 'msg' => '订单不存在']);
    }
} catch (PDOException $e) {
    echo json_encode(['status' => -1, 'msg' => '查询错误']);
}
?>

注意下单成功后要把生成的order_id存入$_SESSION['order_id']，否则接口无法正常查询。 #

步骤2：修改原有HTML代码，添加DOM标识方便JS操作 #

<div class="modal-header">
  <!-- 新增id属性 -->
  <h5 class="modal-title" id="paymentModalTitle">Waiting for payment</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 新增id属性 -->
<div class="modal-body" id="paymentModalBody">
  <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>
<!-- 新增id属性 -->
<div class="modal-footer" id="paymentModalFooter">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
</div>
<!-- 如果项目已经引入jQuery可省略下面一行 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

步骤3：添加轮询AJAX代码 #

在页面底部加入下面的JS代码，实现定时自动查询订单状态：

<script>
// 页面加载完成后启动轮询，每3秒查询一次订单状态
$(function() {
    let paymentTimer = setInterval(checkOrderStatus, 3000); // 3000毫秒=3秒，可自行调整间隔
    
    function checkOrderStatus() {
        $.ajax({
            url: 'check_order_status.php',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                // 状态为1说明已支付
                if (res.status === 1) {
                    // 清除定时器，不再继续查询
                    clearInterval(paymentTimer);
                    // 更新页面提示内容
                    $('#paymentModalTitle').text('Payment Received');
                    $('#paymentModalBody').html(`
                        <p class="h5 text-success">支付成功！</p>
                        <p class='h5'>total price = Rp. <?php echo $_SESSION['totalprice'];?> ,-</p>
                    `);
                    // 替换底部按钮，添加跳转首页按钮
                    $('#paymentModalFooter').html(`
                        <a href="home.php" class="btn btn-primary">返回首页</a>
                    `);
                }
                // 可选：处理订单异常的情况
                if (res.status === -1) {
                    clearInterval(paymentTimer);
                    $('#paymentModalTitle').text('订单异常');
                    $('#paymentModalBody').html('<p class="h5 text-danger">订单不存在或查询失败，请联系工作人员</p>');
                }
            },
            error: function() {
                console.log('查询失败，稍后重试');
            }
        })
    }
})
</script>

注意事项 #

• 轮询间隔建议设置在2-5秒之间，不要设置过短避免给服务器造成不必要的压力
• 如果你的项目没有用jQuery，也可以用原生fetch API实现相同的逻辑
• 支付成功后一定要清除定时器，避免不必要的请求发送
• 短轮询足够满足中小餐厅的点餐场景需求，后续如果要优化实时性，可以替换为WebSocket方案

内容的提问来源于stack exchange，提问作者ichinisanshi