如何从ajax循环创建进度条


how to create progress bar from ajax loop?

我的服务器端数据如下:

$total=100;
$jd=array();
for($i=1;$i<=$total; $i++){
    $jd["current_value"]=$i;
    $jd["total"]=$total;
    $jd["some_extra_data"]="Extra data-$i";
    echo json_encode($jd);
    sleep(1);
}

现在我想从上面的ajax请求数据创建一个进度条。

但我没有从请求中得到任何数据。每次我都得到完整的数据。所以,我无法创建进度条。我该如何申请?求你了,谢谢。

如果您不太反对使用JS库,那么您可以考虑使用JQuerys UI库。

http://jqueryui.com/progressbar/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: 50
    });
  });
  </script>
</head>
<body>
    <div id="progressbar"></div> 
</body>
</html>

如果您将其与JQueryAjax请求相结合,那么您应该能够实现以下目标:http://api.jquery.com/jquery.ajax/

然后,您可以定期调用服务器端页面,以获取一个值来填充进度条。

如果这是直接的方向,请告诉我,如果需要,我可以详细说明。