使用 ajax 请求秒更新进度条答案

【问题标题】：update progress bar using ajax request seconds使用 ajax 请求秒更新进度条
【发布时间】：2013-10-02 14:37:27
【问题描述】：

基本上，我正在为外部登录系统执行 AJAX 请求，如何根据请求的长度更新进度条？

例如，请求在 1.30s 到 1.40s 之间完成，如何根据特定时间间隔更新进度条，例如每更新 10% 10ms左右，这是进度条的HTML布局

<div class="progress progress-striped active">
    <div class="progress-bar"  role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
        <span class="sr-only">65% Complete</span>
    </div>
</div>

进度条的长度由width: 65%属性决定

这个想法基本上是让它看起来像是根据请求进行更新，所以当请求完成时，百分比栏已满

【问题讨论】：

我的建议是不要。在 1.3 到 1.4 秒（在大多数情况下），用户几乎不会想到“我想知道我还剩下多长时间才能完成登录”。使用loader gif。
你怎么知道请求在慢速连接上需要 1.3-1.4 秒而不是 6 秒？
@KevinB 那是针对 OP 的吗？
@Kevin B i quess 他的意思是服务器处理请求大约 1.5 秒

标签： jquery ajax

【解决方案1】：

我认为这篇文章很清楚 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

发布此内容以供将来参考（应删除博客）：

$.ajax({
     xhr: function(){
       var xhr = new window.XMLHttpRequest();
       //Upload progress
       xhr.upload.addEventListener("progress", function(evt){
       if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress
         console.log(percentComplete);
         }
       }, false);
     //Download progress
       xhr.addEventListener("progress", function(evt){
         if (evt.lengthComputable) {
           var percentComplete = evt.loaded / evt.total;
         //Do something with download progress
           console.log(percentComplete);
         }
       }, false);
       return xhr;
     },
     type: 'POST',
     url: "/",
     data: {},
     success: function(data){
    //Do something success-ish
    }
 });

【讨论】：

很高兴我能帮上忙 :) 另外：如果这确实是您问题的答案，请这样标记 :) 以便每个人都清楚您的问题已解决 :)
谢谢@Yoeri！ @Curtis，您应该将答案标记为正确，这样我可能会更快地找到它......
我尝试使用上面的代码，对我不起作用。看起来evt.lengthComputable 不起作用。stackoverflow.com/questions/22502943/…
如果我使用.load 而不是.ajax，这会起作用吗？
我不这么认为。获取 xhr 对象的语法有点不同：$("#success").load("/not-here.php", function(response, status, xhr) {.. }))。这仅在请求完成后执行。

【解决方案2】：

您可以使用 jquery 表单 plugin 并使用此方法 'uploadProgress'，如下所示：

$('#register-form').on('submit', function(e) {
    e.preventDefault();

    $(this).ajaxSubmit({
        url: url,
        uploadProgress: function (event, position, total, percentComplete){
            $('.progress-bar').width(percentComplete + '%');
            $('.progress-bar > p').html(percentComplete);
        },
        success: function (response, statusText, xhr, $form) {
            // TODO: You'll need to do some custom logic here to handle a successful
            // form post, and when the form is invalid with validation errors.
        },
        error: function(a, b, c) {
            // NOTE: This callback is *not* called when the form is invalid.
            // It is called when the browser is unable to initiate or complete the ajax submit.
            // You will need to handle validation errors in the 'success' callback.
            console.log(a, b, c);
        }
    });
});

【讨论】：