如何在Ajax載入時顯示進度條？

Ajax 載入期間顯示進度條

使用 Ajax 執行資料擷取時，在等待伺服器回應時可能會遇到延遲。為了提高使用者體驗，您可以顯示進度條來指示載入狀態。本文將指導您使用 Ajax 顯示進度條。

Ajax 程式碼：

提供的Ajax 程式碼使用jQuery 來處理客戶端資料擷取與顯示結果.

$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

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

    });
});

要向Ajax 請求新增進度事件監聽器，請使用xhr 選項，如下所示：

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress event listener
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                // Calculate upload progress percentage
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar (example: display the percentage)
                console.log(percentComplete);
            }
        });

        // Download progress event listener
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                // Calculate download progress percentage
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar (example: display the percentage)
                console.log(percentComplete);
            }
        });

        return xhr;
    },
    // Rest of the Ajax options remain the same
});

此程式碼為上傳和下載進度事件註冊事件偵聽器，可讓您追蹤進度並相應更新進度欄。

以上是如何在Ajax載入時顯示進度條？的詳細內容。更多資訊請關注PHP中文網其他相關文章！