我正在尝试从数据库中查询大量数据，并且希望显示一个进度条。下面的代码从服务器返回数据信息，但当 Ajax 仍在查询数据时，进度条只是跳转到 100%。我想正确的方法是伪造进度条计时器或可能进行及时的 ajax 调用，例如每秒更新进度条。有人可以帮我解决我的问题吗？谢谢以下是迄今为止的工作代码<html><head><script src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function (e) { function pf(event) { if (event.lengthComputable) { var percentComplete = Math.round((event.loaded/event.total)*100); $(".progressbar").width(percentComplete + '%'); $(".progressbar").html('<span>' + percentComplete +' %</span>') $(".progressbar").html('<span> ' + percentComplete +'% Completed</span>') } }; $("#sForm").on('submit',(function(e) { e.preventDefault(); $('.progressbar').css('width', '0'); $.ajax({ url: "qdata.php", type: "POST", data: new FormData(this), contentType: false, cache: false, processData:false, xhr: function () { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", pf, false); return xhr; }, success: function(data) { if(data.trim() == "good"){alert('completed now');} }, error: function() { } }); }));});</script></head><body><div class="progressbar"></div><form id="sForm" action="qdata.php" method="post"><div id="resultdata"></div><input type="submit" value="Submit now" /></form></body> </html>qdata.php
1 回答
动漫人物
TA贡献1815条经验 获得超10个赞
您可以将进度百分比显示xhr为
xhr: function () {
//upload Progress
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//update progressbar
console.log('percent', percent);
$('.progressbar').css("width", percent + '%');
}, true);
}
return xhr;
},
- 1 回答
- 0 关注
- 159 浏览
添加回答
举报
0/150
提交
取消