jQuery를 사용하여 AJAX 데이터를 로드하는 동안 진행률 표시줄을 표시하는 방법은 무엇입니까?

AJAX로 데이터를 로드하는 동안 진행률 표시줄 표시

데이터베이스에서 데이터를 검색하는 AJAX 쿼리를 수행하는 경우 시간이 걸릴 수 있습니다. 결과가 반환되도록 합니다. 이 로딩 프로세스 중에 사용자에게 피드백을 제공하기 위해 진행률 표시줄을 표시할 수 있습니다.

jQuery로 진행률 표시줄 만들기

jQuery 라이브러리는 내장 메소드를 제공합니다. 진행률 표시줄의 생성 및 조작을 용이하게 합니다. AJAX 호출에 진행률 표시줄을 추가하려면 xhr 개체에 이벤트 리스너를 연결하면 됩니다.

<code class="javascript">$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});</code>

이 코드에서는

• 업로드에 대한 진행 이벤트 리스너입니다. 속성은 서버로 데이터를 보내는 진행 상황을 추적합니다.
• xhr 개체에 대한 진행 이벤트 리스너는 서버에서 데이터를 받는 진행 상황을 추적합니다.
• 퍼센트Complete 변수를 사용하여 완료율을 확인하고 이에 따라 진행률 표시줄을 업데이트합니다.
• 데이터를 성공적으로 검색하고 처리한 후 진행률 표시줄을 숨기고 결과를 표시할 수 있습니다.

이를 구현하면 접근 방식을 사용하면 사용자 친화적인 진행률 표시줄을 통해 AJAX 콜백을 향상시켜 데이터 로드 작업 중에 시각적 피드백을 제공할 수 있습니다.

위 내용은 jQuery를 사용하여 AJAX 데이터를 로드하는 동안 진행률 표시줄을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!