로딩 진행률 표시줄을 구현하는 Ajax 메소드

이 글은 Ajax 로딩 진행률 표시줄의 효과를 주로 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

ajax beforeSend:

beforeSend에 대해 먼저 이야기해 보겠습니다. 요청이 전송되기 전에 실행됩니다. 예를 들어 사용자가 로그인되어 있는지 확인할 수 있습니다. 로그인하지 않은 경우 요청을 중지하고 프롬프트를 표시합니다.

  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });

$.ajax에는 요청이 완료된 후 실행되는 function(){} 매개변수가 있습니다. 이 매개변수는 beforeSend와 함께 사용하여 진행률 표시줄을 표시할 수 있습니다

예:

   $.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          // 设置 进度条到20%慢慢变到50%
        },
        complete: function(){
          // 设置 进度条到80%
        }
        success：function(){
          // 渲染页面
          // 进度到100%
        }
      });

이는 표면적인 현상일 뿐입니다. 표시되는 진행률 표시줄에는 실제 로딩 진행률이 아닌 대략적인 진행률이 표시됩니다.

관련 권장 사항;

웹 페이지 로딩 진행률 표시줄을 구현하는 코드 공유

H5 캔버스에 순환 동적 로딩 진행률 구현 예시

웹페이지 로딩 진행률 표시줄, 다운로드 진행률 표시줄 및 기타 HTML5/CSS3 구현 클래식 케이스

위 내용은 로딩 진행률 표시줄을 구현하는 Ajax 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!