如何处理jQuery getJSON调用信用卡终端时的长等待无响应问题

你的问题核心在于单次AJAX请求长时间挂起（10秒到1分钟），虽然你设置了async: true，但部分浏览器或服务器对长连接有超时限制，同时这种长等待的体验极差，容易让用户误以为页面卡死。正确的做法是把「单次长请求」改成「轮询查询」模式，具体方案如下：

核心思路 #

1. 拆分后端接口：
   • 第一个接口：发起支付请求，仅告知信用卡终端准备接收用户操作，立即返回响应（无需等待用户操作完成）。
   • 第二个接口：查询支付状态，用于定期查询用户操作后的支付结果（成功/失败/等待中）。
2. 前端逻辑调整：
   • 先调用「发起支付」接口，提示用户操作终端。
   • 启动定时器，每隔2-3秒调用「查询支付状态」接口，直到拿到明确结果或达到超时时间。

前端代码示例 #

// 初始化状态提示
$(".completeOrderAjax").html('请引导客户插卡或刷卡');

// 1. 发起支付请求
$.post("/payment-api/init.php", function(initData) {
    if (initData.status !== 'started') {
        $(".completeOrderAjax").html('支付初始化失败，请重试');
        return;
    }

    // 2. 启动轮询查询支付状态
    const pollInterval = setInterval(() => {
        $.getJSON("/payment-api/check-status.php", { paymentId: initData.paymentId }, function(statusData) {
            switch(statusData.status) {
                case 'approved':
                    clearInterval(pollInterval);
                    $(".completeOrderAjax").html('支付已批准');
                    const ccResponse = JSON.stringify(statusData);
                    orderId === 0 ? reSaveOrder('credit', ccResponse) : saveOrder('credit', ccResponse);
                    break;
                case 'declined':
                    clearInterval(pollInterval);
                    const declineText = statusData.resptext || '支付被拒绝，客户可能点击了取消按钮';
                    $(".completeOrderAjax").html(`支付被拒绝：${declineText}`);
                    break;
                case 'pending':
                    // 仍在等待用户操作，继续轮询
                    break;
                default:
                    clearInterval(pollInterval);
                    $(".completeOrderAjax").html('支付状态未知，请重试');
            }
        }).fail(function() {
            clearInterval(pollInterval);
            $(".completeOrderAjax").html('支付查询失败，请重试');
        });
    }, 2000); // 每2秒查询一次

    // 设置超时保护（1分钟后停止轮询）
    setTimeout(() => {
        clearInterval(pollInterval);
        $(".completeOrderAjax").html('支付超时，请重新发起');
    }, 60000);

}).fail(function() {
    $(".completeOrderAjax").html('支付请求发起失败，请重试');
});

后端配合调整 #

• /payment-api/init.php：生成唯一支付ID，通知终端进入等待状态，立即返回{status: "started", paymentId: "xxx"}。
• /payment-api/check-status.php：根据传入的paymentId查询当前支付状态，返回{status: "pending"}（等待中）、{status: "approved", ...}（成功）或{status: "declined", resptext: "..."}（失败）。

额外优化点 #

• 添加加载动画：轮询期间显示加载图标，让用户明确系统在运行。
• 提供取消按钮：允许用户主动终止支付流程，清理定时器和后端状态。
• 避免并发请求：确保上一次查询完成后再发起下一次，防止请求堆积。

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