如何结合jQuery UI与Ajax实现数据透视表加载进度条

你的问题出在两个核心点上：

1. 监听了错误的进度事件 #

你当前使用的xhr.upload.addEventListener("progress")是监听上传进度的（比如向服务器提交大文件场景），但你的需求是从服务器获取数据（下载场景），应该直接监听XMLHttpRequest对象的progress事件，而非upload子对象的事件。

2. 进度条缺少基础样式 #

你的#progressbar div没有设置基础CSS样式，即使宽度变化也无法直观显示，必须添加样式定义进度条的容器和填充效果。

修改后的完整代码 #

HTML（添加进度条样式）

<style>
#progress-container {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
#progressbar {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  text-align: center;
  line-height: 20px;
  color: white;
  transition: width 0.3s ease;
}
</style>

<div id="progress-container">
  <div id="progressbar"></div>
</div>
<table id="table"></table>

JavaScript（修正进度事件监听）

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    var progressBar = $("#progressbar");
    
    // 监听下载进度（替换原upload进度事件）
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = Math.floor((evt.loaded / evt.total) * 100);
        console.log(percentComplete);
        progressBar.css("width", percentComplete + "%");
        progressBar.html(percentComplete + '%');
      }
    }, false);
    
    return xhr;
  },
  type: 'POST',
  url: url,
  dataType: 'json',
  data: { 'date1': date1, 'date2': date2 },
  success: function(data) {
    $("#table").empty();

    data.forEach(centro => {    
      var fila = "<tr>" +
        "<td>" + centro.prefijo + "</td>" +
        "<td>" + centro.sales + "</td>" +
        "<td>" + centro.possales + "</td>" +
        "<td>" + centro.totales + "</td>" +
        "<td>" + centro.percentage + "%" + "</td>" +
        "<td>" + centro.attendance + "</td>" +
        "<td>" + centro.factor + "%" + "</td>" +
        "</tr>";
      $("#table").append(fila);
    }); 
  },
  complete: function() {
    // 可选：加载完成后重置或隐藏进度条
    // $("#progressbar").css("width", "0%").html('');
  }
});

额外注意事项 #

• 确保后端服务器返回Content-Length响应头，否则evt.lengthComputable会为false，无法计算准确的进度百分比。如果后端无法提前获取数据长度，可以改用模拟进度条（比如从0到100的平滑动画，直到请求完成）。
• 如果返回的数据量极小，请求会瞬间完成，进度条可能直接跳到100%，这属于正常现象，可通过测试大数据量接口验证动态效果。

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