php - 如何从 ajax 更改 css 值

Question

我是 ajax 的新手，我很擅长 php 和 css

我有一个使用 cURL 从 url 下载文件的脚本

并将cURL进度写入txt文件

我用ajax每秒更新一次进度

我设法以 1%、5%、50% 等数字回应结果

我尝试使用 Progressbar | jQuery UI 但我做不到

我有一个非常简单的 css 进度条，我想在 css 值中回显 ajax 值

ajax代码

   <script type="text/javascript">

    function Ajax()
    {
        var
            $http,
            $self = arguments.callee;

        if (window.XMLHttpRequest) {
            $http = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                $http = new ActiveXObject('Msxml2.XMLHTTP');
            } catch(e) {
                $http = new ActiveXObject('Microsoft.XMLHTTP');
            }
        }

        if ($http) {
            $http.onreadystatechange = function()
            {
                if (/4|^complete$/.test($http.readyState)) {
                    document.getElementById('ReloadThis').innerHTML = $http.responseText;
                    setTimeout(function(){$self();}, 1000);
                }
            };
            $http.open('GET', 'loadtxt.php' + '?' + new Date().getTime(), true);
            $http.send(null);
        }

    }

</script>

加载loadtxt.php

它的代码

 <?php
//
$file = "progress.txt";
$f = fopen($file, "r");
while ( $line = fgets($f, 1000) ) {
print $line;
}
?>

读取包含进度的文本文件我有以下CSS代码

<div class="meter-value" style="background-color: #0a0; width: 40%;">

我想更新这个值

width: 40%;

来自 Ajax 那么如何从 ajax 更新该值我使用以下代码获取ajax值

<div id="ReloadThis">Default text</div>

Answer 1

这不会像您预期的那样工作。

当像这样使用 ajax 时，您向 php 文件发送请求，它完成脚本并返回值(如果有任何回显)。用这个取得进展是不可能的。这就是为什么显示进度条的上传表单通常是用 Java 或 Flash 编写的。

您正在尝试解析 readyState，但这些值仅表示 ajax 调用是完成、失败还是挂起。

您可以四处搜索并找到一些如何执行此操作的示例，但这比在 ajax 脚本运行时显示一个简单的加载 gif 要困难得多。

编辑:要完成这项工作，您需要将脚本分成多个 block ，并使用 ob_flush 或类似的东西将每个处理过的 block 回显出来。