如何使用 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中文網其他相關文章！