Loading waiting effect before Ajax returns data (graphic tutorial)

We pass parameters to the background through an ajax request, and then the background 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. Next, through this article, I will share with you the loading waiting effect before Ajax returns data. Friends who need it can refer to it

First, we pass the parameters to the background through the ajax request, and then the background passes a series of operations to the front desk Return the data, 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= "javascript:void(0)" rel="external nofollow" onclick="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(&#39;<img id="load" src="/images/load.gif" />&#39;);
   },
   success: function (data) {
    //根据id和class获取td标签
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.wxurl-col&#39;).html(data.QRUrl);
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.localkey-col&#39;).html(data.LocalKey);
    //隐藏生成按钮，插入图片
    var localkey = data.LocalKey;
    jqSender.after(&#39;<img src="/image/&#39; + localkey + &#39;" />&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }

I won’t write the background page. The path passed to the background is configured in the URL. The most important thing is

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

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 what the standard is). Non-standard) Continue to execute the following program until success: function (data)Pause and wait for the background to successfully return data

In this way, the picture inserted in before is equivalent to a loading. When the data After returning successfully, remove the image 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 an 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the ajax.load() method in jQuery

Ajax PHP for data interaction (with code)

Ajax Struts2 receiving array form (with code)

The above is the detailed content of Loading waiting effect before Ajax returns data (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!