jQuery를 사용하여 Ajax가 로드된 콘텐츠에 진행률 표시줄을 추가하는 방법은 무엇입니까?

Ajax가 로드되는 동안 진행률 표시줄 표시

웹 개발에서는 데이터를 검색하고 로드하는 동안 진행률 표시줄을 표시하는 것이 바람직한 경우가 많습니다. 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 객체를 생성하고 업로드 및 다운로드 진행을 위한 이벤트 리스너를 추가합니다. 데이터가 전송되면퍼센트Complete 변수는 웹페이지의 진행률 표시줄을 업데이트하는 데 사용할 수 있는 값을 제공합니다.

위 내용은 jQuery를 사용하여 Ajax가 로드된 콘텐츠에 진행률 표시줄을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!