我想在 PHP 页面处理 AJAX GET 请求时更新进度条( Bootstrap )。
目前，进度条在 AJAX 请求 100% 完成后更新。这些页面的内容比列出的内容多得多，但这是实现功能所需的基础知识。
PHP 主页面
<html><head>
<script type="text/javascript">
function updateBar(i)
{
$('#updateBar').html('<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: '+i+'%;">'+i+'</div>');
}
</script>
</head>
<body>
<?
echo "<button class='btn btn-success' id='button'>Process</button>";
echo "<div class='progress' id='updateBar'>Loading...</div>";
echo "<div id='update'></div>";
?>
<script>
$(document).ready(function () {
$("#button").click(function(){
$("#update").text("Loading...");
$.ajax({
type: "GET",
url: "ajaxPHP",
success: function(data){
$("#update").html(data);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
});
</script>
AJAX PHP 页面 (ajaxPHP):
$max=85;
for($i=0;$i>=$max;$i++){
// HERE ARE A BUNCH OF CURL CALLS AND SERVER SIDE PROCESSING, TAKING ABOUT 30 SECONDS PER LOOP
?>
<script>
var num = "<?php echo $i; ?>";
var max = "<?php echo $max; ?>";
var i = num/max;
updateBar(i);
</script>
<?
}
最佳答案
您需要触发重复的 AJAX 调用，直到脚本完成。像这样的东西:
var getStatus = function() {
$.ajax({
type: "GET",
url: "ajaxPHP",
success: function(data){
$("#update").html(data);
if (data!=100) { // examine the response to determine if the server is done
setTimeout(getStatus, 1000); //delay next invocation by 1s
}
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
};
$(document).ready(function () {
$("#button").click(function(){
$("#update").text("Loading...");
getStatus(); //initiate job and start polling
});
});
关于javascript - AJAX 加载调用 javascript 函数的 PHP 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27625455/