0

我是 ajax 的新手，我是 php 和 css 的新手

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

并将 cURL 进度写入 txt 文件

我使用 ajax 每秒更新一次进度

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

我尝试使用进度条 | 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>
4

2 回答 2

0

你应该改变这个：

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

为了这：

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

之后你应该改变这个：

document.getElementById('ReloadThis').innerHTML = $http.responseText;

为了这：

document.getElementById('meter-value').style.width = $http.responseText + '%';

我认为这应该有效。

您可以了解有关使用 JavaScript 设置 html 元素样式的更多信息：样式对象 - w3schools.com

于 2013-01-15T21:14:36.470 回答
0

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

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

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

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

编辑：使这项工作需要您例如将脚本分成块并使用ob_flush或类似的东西回显每个处理过的块。

于 2013-01-15T21:00:16.160 回答