> 웹 프론트엔드 > JS 튜토리얼 > Ajax로 로딩 진행 표시줄을 구현하는 단계에 대한 자세한 설명

Ajax로 로딩 진행 표시줄을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-02 17:32:21
원래의
1466명이 탐색했습니다.

이번에는 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에는 요청이 완료된 후 실행되는 함수(){} 매개변수가 있습니다. 이는 beforeSend와 함께 사용하여 진행률 표시줄을 표시할 수 있습니다.

예:

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

이것은 진행률 표시줄일 뿐입니다. 실제 로딩 진행 상황이 아닌 대략적인 진행 상황을 보여줍니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Ajax는 페이지로 이동하기 위한 게시물 요청을 어떻게 작동합니까?

Ajax 파일 및 매개변수 업로드를 위한 세부 단계

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿