AJAX请求时如何让Modal加载框在数据就绪前显示且加载完成后正常隐藏

数据老陈

2026-9-26

问题原因

存在冗余二次请求：你已经通过$.ajax请求了usertable.php接口拿到返回结果result，但success回调里没有用注释中的html(result)渲染，反而调用load方法发起了第二次相同的接口请求，属于不必要的逻辑冗余。
模态框状态时序冲突：Bootstrap 模态框的show、hide操作是异步的，需要等CSS动画执行完成才会更新内部状态。如果接口响应速度极快，complete回调在模态框的show动画还没执行完毕时就触发了hide操作，会导致模态框内部状态混乱，无法正常隐藏。
部分版本兼容问题：如果使用的是Bootstrap 5，直接通过jQuery调用modal()方法可能出现状态不同步的问题，更推荐通过原生模态框实例操作。

修复后的代码

$(document).ready(function() {
    $('#LinkUser').click(function(e) {
        e.preventDefault();
        // 提前获取模态框实例（Bootstrap5写法，如果是Bootstrap4可以删掉这段直接用jQuery调用）
        const loadingModal = new bootstrap.Modal(document.getElementById('loading'));
        $.ajax({
            type: "POST",
            url: "usertable.php",
            beforeSend: function(){
                loadingModal.show();
                // Bootstrap4用这个：$('#loading').modal('show');
            },
            success: function(result) {
                // 直接用已经返回的结果渲染，不用二次请求
                $('#showTable').html(result);
            },
            complete:function(){
                // 加100ms延时避开动画时序冲突，也可以根据实际动画时长调整
                setTimeout(() => {
                    loadingModal.hide();
                    // Bootstrap4用这个：$('#loading').modal('hide');
                }, 100);
            }
        });
    });
});

额外排查点

如果修改后还是无法隐藏，可以检查以下两点：