jQuery 使用ajax请求秒更新进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19139613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
update progress bar using ajax request seconds
提问by Curtis
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?
基本上，我正在为外部登录系统执行 AJAX 请求，如何根据请求的长度更新进度条？
For example, the request takes between 1.30sto 1.40sto 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
例如，请求需要1.30 秒到1.40 秒才能完成，我如何根据特定时间间隔更新进度条，例如每 10 毫秒更新 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>
The length of the progress bar is determined using the width: 65%attribute
进度条的长度由width: 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
这个想法基本上是让它看起来像是根据请求更新，所以当请求完成时，百分比栏已满
回答by Yoeri
I think this post is quite clear http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
我认为这篇文章很清楚 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
}
});
回答by knt92
You can use jquery form pluginand use this method 'uploadProgress' like this:
您可以使用 jquery 表单插件并使用此方法“ 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);
}
});
});
