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

이번에는 데이터 목록을 로드하고 기다리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!