Optimize the user experience of waiting for the ajax request server to load the data list

This time I will bring you the user experience of optimizing the ajax request server to load the data list and wait, and the optimization of the ajax request server to load the data list and wait for the user experience. What are the precautions?. Here are the actual cases. Let’s take a look. take a look.

We use weui.loading in weui.js as the effect, and the beforeSend and complete methods of ajax to make a loading that will take a few seconds when loading data...

The JS file that needs to be loaded on the page:

You can download it from weui’s documentation. This is its demo: https://weui.io/weui.js/

Here we mainly talk about jQuery ajax get. When queries data, its structure is:

$.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('数据加载失败！');
  }
})

I believe you have mastered the method after reading the case in this article. More exciting Please pay attention to other related articles on php Chinese website!

Recommended reading:

Ajax to achieve paging effect without refreshing

Use ajax to implement session timeout jump log in page

The above is the detailed content of Optimize the user experience of waiting for the ajax request server to load the data list. For more information, please follow other related articles on the PHP Chinese website!