基本上,我正在为外部登录系统执行AJAX请求,如何根据请求的长度来更新进度栏?
例如,请求需要 1.30s 至 1.40s的时间 才能完成,我如何根据特定的间隔更新进度条,例如每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%属性确定进度条的长度
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 } });