Question

我希望在从AJAX GET请求处理PHP页面时更新进度条（引导程序）。

目前，在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>
<?
}

Answer 1

在脚本完成之前，您需要触发重复的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
  });
});

AJAX加载调用javascript函数的PHP页面

1 个答案: