如何使用 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 變數將提供一個值，您可以使用該值來更新網頁上的進度條。

以上是如何使用 jQuery 為 Ajax 載入的內容新增進度列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！