0

だから私はPHPを使用してCURLでファイルをダウンロードし、サーバー上でそれらを更新するプロジェクトに取り組んでいます。私はすでにその部分を処理しており、現在、ユーザーに進行状況を表示するフロントエンド GUI に取り組んでいます。

したがって、私の最初の考え方は、次のようにコードを使用することでした。

$('#startupgrade').click(function() {
    $('#upgradeprogress').css({"width": "0%"});
    $('#upgradestatus').append('<p>Starting Upgrade...</p>');
    $('#upgradeprogress').css({"width": "10%"});
    $('#currentstep').load('upgrade.php #statusreturn', 'step=1');
    $('#upgradestatus').append('<p>Step 1 Complete...</p>');
    $('#upgradeprogress').css({"width": "20%"});
})

この背後にある考え方は、PHP ページをロードし、PHP が ID #statusreturn で生成するページから「ステータス メッセージ」を取得することでした。これは、そのステップが失敗または成功した場合に現在のページに追加されます。上記の例では、単純にして Step 1 Complete を追加しましたが、最初のステップが完了したかどうかを確認するために、そこに何らかのタイプの標準 JS を追加します。

私はJSとjQueryに非常に慣れていないので、これを行うためのより簡単またはより正しい方法があるはずだと感じています。ステップ数に基づいて if ステートメントを使用して、標準の JS を実行している可能性がありますか?

より少ないコードで、またはより簡単な方法でこれを行う方法について、提案や推奨事項はありますか? 最終的に使用して学習する方法が正しいことを確認したいので、初心者の間違いを犯したり、必要以上のコードを使用したりしないことを願っています。

ご意見をお待ちしております。事前にご協力いただきありがとうございます。

#upgradeprogress は、幅によって制御される Twitter Bootstrap プログレス バーを使用しています。#upgradestatus は、ターミナルとほぼ同様の出力を表示するブートストラップ ウェルです。

4

1 に答える 1

1

load 関数は非同期関数です。つまり、ロードを待たずに直接続行します。ロードを待つために、進行状況バーの更新を成功コールバック ハンドラーに配置します。

http://api.jquery.com/load/

$('#result').load('steps/step1.php', function() {
  $('#upgradeprogress').css({"width": "10%"}); //update your status bar here

  $('#currentstep').load('upgrade.php #statusreturn', function() {
    $('#upgradeprogress').css({"width": "20%"});
    //add more steps here if required
  });
});

その success function( ) が実行された場合にのみ、リクエストが完了したことを確認できます。

于 2012-12-28T14:42:14.437 に答える