AJAX校验表单提交异常：无法阻止提交及视图不更新问题排查

核心错误1：AJAX返回值处理逻辑错误 #

你当前直接将$.ajax()的返回值赋值给isComplete，但这个返回的是jqXHR对象，并非success回调里的return true/false。哪怕设置了async: false，success回调内部的return也不会传递到外部变量。

修复后的同步AJAX版本 #

function checkCartExistingInHolding(){
    console.log('in func');
    let submitAllowed = true; // 默认允许提交
    $.ajax({
        url: "/cart/checkCartExistInHolding",
        method: "get",
        async: false,
        success: function (response) {
            if(response === true){
                console.log('is true');
                submitAllowed = true;
            }else{
                console.log('is false');
                // 无需先清空再赋值，直接覆盖即可
                $('tbody[role="cartlist"]').html(response);
                traverse(document.body);
                setEventListeners();
                submitAllowed = false;
            }
        },
        // 新增错误回调，处理请求失败场景
        error: function(){
            console.log('验证请求失败');
            submitAllowed = false;
        }
    });
    return submitAllowed;
}

核心错误2：视图更新的潜在问题 #

• 你原本先清空tbody再赋值的操作冗余，直接html(response)即可完成覆盖
• 需确认tbody[role="cartlist"]选择器是否能精准匹配目标元素
• 需确认后端在返回false场景下，response是否为有效的HTML内容
• 同步AJAX会阻塞浏览器UI渲染，可能导致DOM更新延迟，且该写法已被标记为废弃

更优方案：改用异步AJAX（推荐） #

同步AJAX会导致页面卡顿，体验极差，建议用异步逻辑手动控制表单提交：

1. 修改表单代码（移除onsubmit属性） #

<form id="paymentForm" action="..." method="post">
    @csrf
    <button id="payment" class="btn btn-success-theme payment-btn mt-5 mb-5" disabled>پرداخت</button>
</form>

2. 绑定异步提交事件 #

$('#paymentForm').on('submit', function(e){
    e.preventDefault(); // 先阻止默认提交行为
    const $form = $(this);
    
    $.ajax({
        url: "/cart/checkCartExistInHolding",
        method: "get",
        success: function (response) {
            if(response === true){
                console.log('is true');
                // 验证通过，解绑事件后手动提交表单
                $form.unbind('submit').submit();
            }else{
                console.log('is false');
                $('tbody[role="cartlist"]').html(response);
                traverse(document.body);
                setEventListeners();
            }
        },
        error: function(){
            console.log('验证请求失败');
            // 可在此处添加错误提示逻辑
        }
    });
});

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