Ajax implementation loading progress bar

Time:2020-2-17

ajax beforeSend:

First, let’s talk about this beforeSend. Before the request is sent, for example, you can judge 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(); // stop the request
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });

One of the parameters of $. AJAX is complete: function() {} is executed after the request is completed, which can be used with beforeSend to show the progress bar

For example:

$.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          //Set the progress bar to 20% and slowly to 50%
        },
        complete: function(){
          //Set progress bar to 80%
        }
        success:function(){
          //Render page
          //Progress to 100%
        }
      });

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

The above is the Ajax implementation loading progress bar introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!

Recommended Today

The application of USB camera in rk3399

The application of USB camera in rk3399 1, introduction UVCFull nameUSB Video Class, is a set of standard customized by usb-if. All USB interface cameras complying with this standard can almost be used directly under Windows Linux and other systems, achieving the similar effect of drive free. Of course, it doesn’t mean that there is […]