jQuery Ajax填充HTML时如何避免新旧内容切换出现空白间隙

问题根因 #

你遇到的空白问题核心是beforeSend钩子中直接调用html()方法覆盖了#uni-results容器的原有内容，请求发出的同时旧内容就被清空，只能等待新请求返回后才能渲染新内容，中间就出现了空白等待期。

优化方案 #

方案1：完全无缝切换（不需要加载提示的场景） #

直接删除beforeSend配置块即可，原有内容会一直保留到新请求成功返回后才被替换，不会出现空白期。修改后核心代码如下：

function countrySelect() {
    const countries = $('#countries-list option:selected').val();
    $.ajax({
        url: "http://127.0.0.1/newtemplate/for-students/test/",
        cache: false,
        type: "POST",
        data: {countries:countries},
        dataType: 'html',
        success: function(response){                 
            $("#uni-results").html(response);

            // 无返回结果时展示提示
            if( !$.trim( $('#uni-results').html() ).length ) { 
                $('#uni-results').html("未找到匹配结果");
            }
        }
    });
}

方案2：保留加载提示且不清除旧内容（需要加载状态的场景） #

给容器加相对定位，请求过程中追加覆盖在旧内容上方的半透明加载遮罩，不会清空原有内容，请求返回后再移除遮罩替换内容。

新增CSS样式

#uni-results {
    position: relative;
}
#uni-results .fetchLoading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

修改后JS代码

// 存储上一次未完成的请求，避免多次请求并发导致内容错乱
let lastUniRequest = null;

function countrySelect() {
    const countries = $('#countries-list option:selected').val();
    // 取消上一次还未完成的请求
    if (lastUniRequest) {
        lastUniRequest.abort();
    }

    lastUniRequest = $.ajax({
        url: "http://127.0.0.1/newtemplate/for-students/test/",
        cache: false,
        type: "POST",
        data: {countries: countries},
        dataType: 'html',
        beforeSend: function() {
            // 追加加载遮罩，不修改原有内容
            $("#uni-results").append('<div class="fetchLoading"><i class="fas fa-circle-notch fa-spin" style="font-size:2rem"></i></div>');
        },
        success: function(response){
            $("#uni-results").html(response);
            // 无返回结果时展示提示
            if( !$.trim( $('#uni-results').html() ).length ) { 
                $('#uni-results').html("未找到匹配结果");
            }
        },
        complete: function() {
            // 重置请求状态
            lastUniRequest = null;
        }
    });
}

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