How to make loading waiting animation effect before Ajax returns data

This time I will show you how to make a loading waiting animation effect before Ajax returns data. How to make a loading waiting animation effect before Ajax returns data. What are the precautions?The following is a practical case. Get up and take a look.

First, we pass parameters to the backend through an ajax request, and then the backend returns the data to the frontend after a series of operations. I hope to display a loading.gif before waiting for the data to be returned successfully

No nonsense, execute the click event on the page(<a sceneid="@scene.ID" href="<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>:void(0)" rel="external nofollow" <a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a>="build(this)">Generate</a>)

Call the following method:

function build(sender) {
  var jqSender = $(sender);
  var sceneid = jqSender.attr('sceneid');
  $.ajax({
   type: 'post',
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after('<img id="load" src="/images/load.gif" />');
   },
   success: function (data) {
    //根据id和class获取td标签
    $('tbody tr[id=' + sceneid + '] td.wxurl-col').html(data.QRUrl);
    $('tbody tr[id=' + sceneid + '] td.localkey-col').html(data.LocalKey);
    //隐藏生成按钮，插入图片
    var localkey = data.LocalKey;
    jqSender.after('<img src="/image/&#39; + localkey + &#39;" />');
   },
   complete: function () {
    $('#load').remove();
   }
  });
 }

The background page will not be written, in the url The path passed to the background is configured. The most important thing is

beforeSend: function () { jqSender.hide().after('<img id="load" src="/images/load.gif" />'); },

This should take into account the characteristics of ajax asynchronous requests. When ajax is executed to the url, a thread will jump to the background for execution,

The browser will add a thread (I don’t know if this is standard or not) to continue executing the subsequent program until success: function (data)pauses and waits for the background to successfully return data

In this way, the picture inserted in before is equivalent to a loading. When the data is returned successfully, remove the picture in before and write it in the complete: function () statement.

My backend processing flow is roughly like this: First, make an http GET request to obtain the access_token of the WeChat public platform, and then use http POST request to obtain the ticket in exchange for the WeChat QR code.

Then use the WebClient method to download the requested QR code to local storage, and then add, delete, check, and modify the database to display the QR code on the web page.

Such a long period of time allows enough time for the loading to be displayed. If the time is relatively short, you can check online to see if a time has been defined so that the loading can be displayed completely so as not to be too abrupt.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement WebApi Ajax cross-domain requests using CORS

How to implement dynamic loading of combo boxes with Ajax (With code)

The above is the detailed content of How to make loading waiting animation effect before Ajax returns data. For more information, please follow other related articles on the PHP Chinese website!