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 중국어 웹사이트의 기타 관련 기사를 참조하세요!