jQuery を使用して Ajax で読み込まれたコンテンツに進行状況バーを追加する方法

Ajax で読み込まれたコンテンツ中に進行状況バーを表示する

Web 開発では、データの取得および読み込み中に進行状況バーを表示することが望ましいことがよくあります。 Ajax 経由でページに変換します。これは、プロセスが進行中であることを示す視覚的なフィードバックをユーザーに提供するのに役立ちます。

Ajax コードの例:

次の例を考えてみましょう。選択時の Ajax クエリ、データベースからデータの取得:

<code class="javascript">$("#client").on("change", function() {
  var clientid = $("#client").val();

  $.ajax({
    type: "post",
    url: "clientnetworkpricelist/yourfile.php",
    data: "title=" + clientid,
    success: function(data) {
      $("#result").html(data);
    }
  });
});</code>

jQuery を使用したプログレス バーの追加:

この Ajax 操作にプログレス バーを追加するには、次のようにします。 $.ajax() 設定内で xhr() メソッドを利用できます:

<code class="javascript">$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();

    // Upload progress listener
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update progress bar accordingly
      }
    });

    // Download progress listener
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update progress bar accordingly
      }
    });

    return xhr;
  },
  type: 'POST',
  url: &quot;/&quot;,
  data: {},
  success: function(data){
        // Do something success-ish
  }
});</code>

このコードは XMLHttpRequest オブジェクトを作成し、アップロードとダウンロードの両方の進行状況のイベント リスナーを追加します。データが転送されると、percentComplete 変数は、Web ページ上の進行状況バーを更新するために使用できる値を提供します。

以上がjQuery を使用して Ajax で読み込まれたコンテンツに進行状況バーを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。