jQuery を使用した AJAX データの読み込み中にプログレスバーを表示するにはどうすればよいですか?

AJAX によるデータのロード中に進行状況バーを表示する

データベースからデータを取得する AJAX クエリを実行すると、時間がかかることがあります。結果が返されるようにします。この読み込みプロセス中にユーザーにフィードバックを提供するために、進行状況バーを表示できます。

jQuery を使用した進行状況バーの作成

jQuery ライブラリには組み込みメソッドが用意されています。プログレスバーの作成と操作を容易にします。 AJAX 呼び出しに進行状況バーを追加するには、xhr オブジェクトにイベント リスナーをアタッチします。

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

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

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

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});</code>

このコード内:

• アップロードの進行状況イベント リスナープロパティは、サーバーへのデータ送信の進行状況を追跡します。
• xhr オブジェクトの進行状況イベント リスナーは、サーバーからのデータ受信の進行状況を追跡します。
• percentComplete 変数を使用して、
• データが正常に取得され処理された後、進行状況バーを非表示にして結果を表示できます。

これを実装すると、このアプローチでは、使いやすい進行状況バーを使用して AJAX コールバックを強化し、データ読み込み操作中に視覚的なフィードバックを提供できます。

以上がjQuery を使用した AJAX データの読み込み中にプログレスバーを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。