使用Ajax请求秒更新进度条 [英] update progress bar using ajax request seconds
问题描述
Basicaly,我在执行一个AJAX请求外部登录系统,我怎么可以根据请求的长度更新进度条?
Basicaly, I'm performing an AJAX request for an external login system, how can I update the progress bar based on the length of the request?
例如,在 1.30s 请求花费的 1.40s 即可完成,我怎么可以更新基于一定的时间间隔一个进度条,像更新10%,每10ms的什么的,这里的进度条的HTML布局
For example, the request takes between 1.30s to 1.40s to complete, how can I update an progress bar based on certain intervals, like update it 10% every 10ms or something, here's the HTML layout for the progress bar
<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>
进度条的长度是使用宽度决定:65%
属性
这个想法是基本上得到它看起来像它的基础上,要求更新,使得当请求完成的百分比栏已满
The idea is to basically get it to look like it's updating based on the request so when the request is complete the percentage bar is full
推荐答案
我觉得这个职位很清楚 <一href="http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/">http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
I think this post is quite clear http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
发布此以供将来参考(应该的博客被删除):
Posting this for future reference (should the blog be removed):
$.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屋!