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