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

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
  });
});

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-23 17:59:00

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-23 17:59:00

解决方案1
1 已采纳 2014-12-23 17:59:00