如何在jQuery Ajax执行期间实现加载器的百分比显示

嘿，我看到你的问题了——你想在Ajax加载数据的过程中，实时在加载器里显示进度百分比，但现在只有请求完全结束后才会更新数值，对吧？问题的核心其实就在你代码里的async: false这个设置上！

为什么原来的代码不工作？ #

当你把Ajax请求设置为**同步（async: false）**时，浏览器的主线程会被完全阻塞，直到整个请求完成。这意味着xhr的progress事件回调根本没法在请求过程中实时执行，只能等请求结束后一次性触发，自然就看不到实时的百分比更新了。

修正后的完整代码 #

把同步请求改成异步（这也是Ajax的默认行为，你可以直接删掉async: false），然后完善进度计算的逻辑，还要处理服务器未返回Content-Length的情况：

$(document).ready(function() {
    // 假设你有一个显示百分比的元素，比如<div id="loader-percent"></div>
    const $loaderPercent = $('#loader-percent');
    const $loader = $('#your-loader-element'); // 你的加载器容器

    // 请求开始前显示加载器
    $loader.show();
    $loaderPercent.text('0%');

    $.ajax({
        dataType: "json",
        url: url,
        data: { strDate: startDate },
        type: "GET",
        cache: false,
        // 删掉async: false，或者显式设为true（默认就是true）
        async: true,
        xhr: function () {
            const xhr = new window.XMLHttpRequest();
            // 监听加载进度事件
            xhr.addEventListener("progress", function (evt) {
                // 先判断是否能获取到总长度（服务器必须返回Content-Length响应头）
                if (evt.lengthComputable) {
                    const percentComplete = Math.round((evt.loaded / evt.total) * 100);
                    // 实时更新加载器里的百分比
                    $loaderPercent.text(percentComplete + '%');
                } else {
                    // 如果没法计算真实百分比，可以显示"加载中..."或者模拟进度
                    $loaderPercent.text('加载中...');
                }
            }, false);
            return xhr;
        },
        success: function(response) {
            // 请求成功后的逻辑
            console.log('数据加载完成:', response);
            // 隐藏加载器
            $loader.hide();
        },
        error: function(xhr, status, error) {
            // 请求出错的处理
            console.error('加载失败:', error);
            // 隐藏加载器
            $loader.hide();
        }
    });
});

关键注意事项 #

1. 服务器必须返回Content-Length响应头：如果你的服务器没有在响应中返回这个头，evt.total会是0，lengthComputable会是false，这时候就没法计算真实的加载百分比。这种情况下，你只能用“加载中...”这类提示，或者做一个模拟的进度动画。
2. 不要用同步请求：同步请求不仅会导致进度事件失效，还会让整个浏览器在请求期间卡住，用户体验极差，现代浏览器甚至已经开始限制某些场景下的同步Ajax请求了。

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