How to use ajax to request the server to prompt loading when loading a data list

The following editor will bring you an article on how to use ajax to request the server to load a data list and prompt loading. The editor thinks it's pretty good, so I'll share the ajax source code with you now and give it as a reference. Let's follow the editor to see how to use ajax to request the server to load the data list.

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

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

The above method of cleverly using Ajax to request the server to load a data list and prompting the loading method is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Detailed examples of ajax implementation of loading data function

Examples of how to use ajax

Detailed example of how to process data after ajax is submitted to the java background

The above is the detailed content of How to use ajax to request the server to prompt loading when loading a data list. For more information, please follow other related articles on the PHP Chinese website!