我正在嘗試從數(shù)據(jù)庫中查詢大量數(shù)據(jù)，并且希望顯示一個進度條。下面的代碼從服務器返回數(shù)據(jù)信息，但當 Ajax 仍在查詢數(shù)據(jù)時，進度條只是跳轉到 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條經(jīng)驗 獲得超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 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消