进度条 jQuery 3 AJAX

介绍

本文将介绍如何使用jQuery 3和AJAX创建一个进度条，以便在向服务器发送数据的过程中，可以向用户显示进度条，从而提高用户体验。

技术栈

• jQuery 3
• AJAX

实现步骤

1. 导入jQuery库，例如：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 创建一个HTML元素作为进度条，例如：

<div id="progressbar"></div>

3. 在CSS中为进度条设置样式，例如：

#progressbar {
  width: 100%;
  height: 10px;
  background-color: lightgray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#progressbar div {
  background-color: green;
  height: 100%;
}

4. 在JavaScript中使用AJAX向服务器发送数据，并在发送之前创建进度条，例如：

$(document).on("click", "#submit-btn", function() {
  var formData = new FormData($(this).closest("form")[0]);
  $.ajax({
    url: "/submit",
    type: "POST",
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total;
          $("#progressbar div").css({
            width: percentComplete * 100 + "%"
          });
        }
      }, false);
      return xhr;
    },
    success: function(data) {},
    data: formData,
    cache: false,
    contentType: false,
    processData: false
  });
  $("#progressbar").show();
});

5. 在发送完成后隐藏进度条，例如：

$(document).ajaxStop(function() {
  $("#progressbar").hide();
});

结论

本文介绍了如何使用jQuery 3和AJAX创建进度条。通过这种方法，可以为用户提供更好的体验，并向他们显示数据发送的进度，从而让他们知道大概需要多久才能完成。