Question

我目前正在开发一个具有自动创建批量记分卡功能的Web应用程序，创建时间有点长，1000个数据相当于创建记分卡的7分钟，我不会这样做。我希望用户只是盯着我创建的加载栏并等待7分钟直到它成功。

我的问题是如何在ajax post请求中获得进度百分比？

我已经尝试过这个，但没有运气。

＆＃13;

xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        xhr.onprogress = function (e) {
            // For downloads
            if (e.lengthComputable) {
                console.log(e.loaded / e.total);
            }
        };
        xhr.upload.onprogress = function (e) {
            // For uploads
            if (e.lengthComputable) {
                console.log(e.loaded / e.total);
            }
        };
        return xhr;
    }

＆＃13;

Answer 1

onprogress和upload.onprogress事件表示加载或上传数据的进度。我从问题中了解到，在您的情况下，服务器端的数据创建需要时间。您将不得不考虑一种自定义方式来计算进度。例如，如果您知道它总是需要大约7分钟，那么您已经知道了进展。

我可以使用与您尝试加载图像几乎相同的代码来打印进度。代码jsbin

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?auto=compress&cs=tinysrgb&h=650&w=940', true);
xhr.send();
xhr.onprogress = function (e) {
    // For downloads
    if (e.lengthComputable) {
        console.log(e.loaded / e.total);
    }else{
      console.log("Unknown progress");
    }
};

xhr.upload.onprogress = function (e) {
    // For uploads
    if (e.lengthComputable) {
        console.log(e.loaded / e.total);
    }
};

xhr.onload = function(){
  console.log("loaded");
}

0.020057260632112467
0.12955284846249054
0.3485440241232467
0.49674801312022326
0.5894343173500785
0.7427281403126078
0.8960219632751371

获取Ajax发布请求中的进度百分比

1 个答案: