使用ajax请求秒更新进度条

  • Z时代
  • 2024-01-10
  • 分类：问答

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

例如，请求需要 至

才能完成，我如何根据特定的间隔更新进度条，例如每10ms进行10％的更新，等等，这是进度条的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%属性确定进度条的长度

想法是基本上让它看起来像是基于请求进行更新，因此当请求完成时，百分比栏已满

回答：

我认为这篇文章非常清楚 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
    }
 });

以上是 使用ajax请求秒更新进度条 的全部内容， 来源链接： utcz.com/qa/403488.html

回到顶部