Ajax method to implement loading progress bar

This article mainly introduces to you the effect of ajax loading progress bar. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

ajax beforeSend:

Let’s talk about this beforeSend first. It is executed before the request is sent. For example, it can determine whether the user is logged in. If not, stop the request and prompt.

  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });

$.ajax has a parameter complete: function(){} is executed after the request is completed, and can be used to display the progress bar with beforeSend

For example:

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

This is just the progress bar seen on the surface, showing the approximate progress, not the real loading progress.

Related recommendations;

Code sharing to implement web page loading progress bar

H5 canvas implementation example of circular dynamic loading progress

The implementation of HTML5/CSS3 web page loading progress bar, download progress bar and other classic cases

The above is the detailed content of Ajax method to implement loading progress bar. For more information, please follow other related articles on the PHP Chinese website!