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

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

但是当我跑的时候看起来像

在此处输入图像描述

怎么做谢谢

score 2 · Accepted Answer

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

您假设（或希望）发生的事情：

从网页向 PHP 页面发出 Ajax 请求
PHP页面收到ajax请求
PHP页面开始循环
PHP 页面开始打印数字
PHP 页面将当前的数字返回到执行 ajax 请求的网页
网页使用第一个值更新进度条
再次使用ajax请求网页
PHP 打印出它所在的当前数字并将该值返回到请求页面
网页用当前值更新进度条
冲洗并重复步骤 7 到 9

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

从网页向 PHP 页面发出 Ajax 请求
PHP页面收到ajax请求
PHP页面开始循环
PHP循环打印所有数字
PHP将所有数字的列表返回到网页
网页打印所有数字的列表作为进度监听器的更新

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

score 0 · Accepted Answer

如果有人现在正在寻找，我也在考虑使用进度条来监视我的 Ajax。如前所述，您不能在 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 );
}

参考：

如何使用 JSON 结果更新 Extjs 进度条？

Web 应用程序中的进度条，ExtJS / JAVA

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

2 回答 2

Related