如何使用ajax php和mysql正确显示进度条
我正在尝试从数据库中查询大量数据，并且希望显示一个进度条。下面的代码从服务器返回数据信息，但当 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
慕勒34288721回答
-
动漫人物
您可以将进度百分比显示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; },
随时随地看视频慕课网APP
PHP