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 要素のスタイル設定について詳しくは、Style オブジェクト - w3schools.comをご覧ください。

于 2013-01-15T21:14:36.470 に答える
0

これは期待どおりには機能しません。

このように ajax を使用する場合、php ファイルにリクエストを送信すると、スクリプトが完了し、値が返されます (何かがエコーされた場合)。これで進歩を遂げることは不可能です。これが、通常プログレスバーを表示するアップロードフォームが Java または Flash で記述されている理由です。

readyState を解析しようとしていますが、これらの値は ajax 呼び出しが完了したか、失敗したか、保留中かのみを表します。

グーグルで検索して、これを行う方法の例をいくつか見つけることができますが、ajax-script の実行中に単純な loading-gif を表示するよりもはるかに困難です。

編集:これを機能させるには、たとえば、スクリプトをチャンクに分割し、処理された各チャンクを使用してob_flush、または同様のものをエコーする必要があります。

于 2013-01-15T21:00:16.160 に答える