>웹 프론트엔드 >JS 튜토리얼 >Ajax 요청 서버가 데이터 목록을 로드할 때까지 기다리는 사용자 경험 최적화

Ajax 요청 서버가 데이터 목록을 로드할 때까지 기다리는 사용자 경험 최적화

php中世界最好的语言
php中世界最好的语言원래의
2018-04-02 09:19:551650검색

이번에는 데이터 목록을 로드하고 기다리는 Ajax 요청 서버 최적화에 대한 사용자 경험을 가져오겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다. weui.js의 weui.loading을 효과로 사용하고, Ajax의

before

Send 및 Complete 메소드를 사용하여 데이터를 로드할 때 몇 초 정도 걸리는 로딩을 만듭니다...

필요한 JS 페이지에 로드됩니다. 파일:

weui 문서에서 다운로드할 수 있습니다. 데모:

https://

weui.io/weui.js/여기서 우리는 주로

jQuery

ajax get에 대해 이야기합니다. querydata의 구조는 다음과 같습니다:

$.ajax({
  type: 'get',
  url: url,
  data: data,
  dataType: 'json',
  contentType: 'apllication/json; charset=utf-8' ,
  //数据加载前调用的方法 beforeSend()
  beforeSend: function(data){
   //这里判断,如果没有加载数据,会显示loading    
   if(data.readyState == 0){ 
     weui.loading('loading');   
   }
  },
  //数据加载成功调用的方法 sucess()
  sucess: function(data){
    //这里写数据加载成功后,会执行的代码
  },  
  //数据加载成功后调用的方法  complete()
  complete: function(data){
    //这里判断,数据加载成功之后,loading 隐藏
    if(data.status == 200){
      setTimeOut(function(){
        weui.loading('loading').hide();
      },500);
    }
  },
  //数据加载错误后调用的方法 error()
  error: function(data){
    weui.topTips('数据加载失败!');
  }
})
당신이 이 방법을 마스터했다고 믿습니다. 이 기사의 사례 등을 읽은 후 얼마나 흥미로웠는지, PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 자료:

새로 고침 없이 페이징 효과를 얻기 위한 Ajax


ajax를 사용하여 로그인 페이지로 이동하기 위한 세션 시간 초과 구현

위 내용은 Ajax 요청 서버가 데이터 목록을 로드할 때까지 기다리는 사용자 경험 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.