如何显示进度条而载入，用ajax [英] How to show progress bar while loading, using ajax

问题描述

我有一个下拉框。当用户选择从下拉框中的值时，它执行一个查询以从数据库中检索数据，并示出结果在用ajax前端。这需要时间一点点，所以在这段时间里，我想展示一个进度条。我已经搜查，我发现很多教程上载的创建进度条，但我还没有喜欢任何。任何一个可以指导我该怎么做？

我的阿贾克斯code：

 ＆LT;脚本＆GT;
$（函数（）{
    $（＃客户端）。在（变，函数（）{
      。VAR客户端ID = $（＃客户端）VAL（）;

    $阿贾克斯（{
            类型：后，
            网址：clientnetworkpricelist / yourfile.php
        数据：标题=+客户端ID，
        成功：功能（数据）{
             $（＃结果）HTML（数据）;
        }
    }）;
    }）;
}）;
＆LT; / SCRIPT＆GT;
 

解决方案

本的的链接 描述了如何您可以添加进度事件监听XHR对象的jQuery。

  $。阿贾克斯（{
 XHR：函数（）
{
VAR XHR =新window.XMLHtt prequest（）;
//上传进度
xhr.upload.addEventListener（进步，功能（EVT）{
  如果（evt.lengthComputable）{
    VAR percentComplete = evt.loaded / evt.total;
    //做一些与上传进度
    执行console.log（percentComplete）;
  }
}， 假）;
//下载进度
xhr.addEventListener（进步，功能（EVT）{
  如果（evt.lengthComputable）{
    VAR percentComplete = evt.loaded / evt.total;
    //做点什么下载进度
    执行console.log（percentComplete）;
  }
}， 假）;
返回XHR;
}，
键入：POST，
网址：/，
数据： {}，
成功：功能（数据）{
//做一些事情的成功杂交
}
}）;
 

I have a dropdown box. When the user selects a value from the dropdown box, it performs a query to retrieve data from database, and shows the results in the front end using ajax. It takes a little bit of time, so during this time, I want to show a progress bar. I have searched, and I have found numerous tutorials on creating progress bars for uploads, but I haven't liked any. Can any one guide me on how to do that?

My ajax code:

<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $("#result").html(data);
        }
    }); 
    });
});
</script>

解决方案

This link describe how you can add a progress event listener to the xhr object jquery.

$.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！