Question

我尝试创建一个进度条等待服务器做某事。服务器完成后，进程条就会完成。

这是我的js

var pbar4 = Ext.create('Ext.ProgressBar', {
        text:'Waiting on you...',
        width: 300,
        renderTo:Ext.getBody()
    });

    Ext.Ajax.request({
        url: 'getStatus.php',
        success: function(r) {
            if (r.responseText == 100)
               pbar4.updateText('All finished!');
            else 
               pbar4.updateProgress(r.responseText, r.responseText+'% completed...');
        }
    });

和getStatus.php

$total = 10000;
for ($i = 0; $i <= $total; $i++) {
    echo $i/$total*100;
}

但是，当我看起来像

enter image description here

如何做到这一点，谢谢

Answer 1

这里有你对ajax如何对服务器上的页面做出反应的困惑。更具体地说，页面并不像你想象的那样有状态。

您假设（或想要）发生的事情：

Ajax请求来自网页的PHP页面
PHP页面接收ajax请求
PHP页面启动循环
PHP页面开始打印数字
PHP页面将当前的号码返回到执行ajax请求的网页
网页更新带有第一个值的进度条
再次使用ajax进行网页请求
PHP打印出当前打开的数字并将该值返回到请求页面
网页更新带有当前值的进度条
冲洗并重复步骤7至9

实际发生的事情非常简单：

Ajax请求来自网页的PHP页面
PHP页面接收ajax请求
PHP页面启动循环
PHP打印循环中的所有数字
PHP将所有数字的列表返回到网页
网页打印所有数字的列表，作为进度监听器的更新

要解决此问题，您实际上需要让PHP页面以某种方式表示您想要在此处表示的进度。这可以通过让PHP启动一个进程（新线程，不确定php是否有这个）在第一个请求中将数字写入文件，然后从网页读取子序列请求读取文件中的最后一个数字并让它返回它。您也可以使用数据库执行类似的操作。

Answer 2

如果有人正在寻找，我也在考虑使用进度条来监控我的Ajax。作为previously mentioned，您不能在PHP中循环打印并阅读它。我是这样做的：

在ExtJS中创建一个监视器ID。
执行Ext.Ajax，传递监视器ID
创建Ext.util.TaskRunner();，监控包含Jand更新进度条的服务器文件
PHP端从ExtJS传递的监视器ID创建JSON文件。
通过多次调用来更新PHP中的JSON文件：

代码：

$cnt = 0;
$total = 17; //number of times sendStatus(); was called
$monitorPath = '/path/to/file' . $_REQUEST['fileNameFromExtJS']
function sendStatus()
{
  global $cnt, $total, $monitorPath;
  $statusMessage = array(
    "Tinkering stuff..",
    "50% complete..",
    "Sending...",
    "Done!");

  $statusMessage = $statusMessage[$cnt];
  $cnt ++;


  $str = '{"count": '.$cnt.', "total": '.$total.', statusMessage: "'.$statusMessage.'"}';
  file_put_contents($monitorPath, $str, LOCK_EX );
}

参考：

How to update Extjs Progress Bar with JSON results?

Progress bar in your web application, ExtJS / JAVA

Extjs4.1 - 如何使用进度条和PHP

2 个答案: