The implementation method of loading wait effect before Ajax return data

We all know when we load some pages. will appear waiting for the loading page, we pass the AJAX request, the parameters passed to the background, and then after a series of operations in the background to return the data to the foreground, I hope to wait until the data can be successfully returned to show a loading.gif diagram. Next through this article to everyone to share the Ajax return data before the loading wait effect, the need for friends can refer to.

No nonsense, click on the page to do the event （<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</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 () { C7/>jqsender.hide (). After ('  ');   },   success:function (data) {    //Get TD label based on ID and class    $ (' tbody tr[id= ' + Sceneid + '] td.wxurl-col '). HTML (data. Qrurl);    $ (' tbody tr[id= ' + Sceneid + '] td.localkey-col '). HTML (data. Localkey);    Hide Build button, insert Picture    var localkey = data. Localkey;    Jqsender.after ('  ');   },   complete:function () {    $ (' #load '). Remove ();   }  }); }

The background page is not written, the URL is configured to pass to the background of the path, the most important thing is

Beforesend:function () {jqsender.hide (). After ('  ');},

This takes into account the characteristics of the Ajax asynchronous request, when Ajax execution to the URL, there will be a thread to go to the background to execute,

Browser will add a thread (do not know the standard) to continue to execute the subsequent program, to success: function (data) pause waiting for background successful return data

In this way, the image inserted inside the before is equivalent to a loading, and when the data is successfully returned, the image inside the before is removed and written in the Complete:function () statement.

The process of my backstage is like this: first an HTTP GET request, get the access_token of the public platform, and then use the HTTP POST request, get the ticket of the QR code

Then use the WebClient method, the request to the QR code to download to the local storage, and then the database of additions and deletions to check and display the QR code to the Web page.

Such a big paragraph just let loading have enough time to show out, if the time is short, you can check online to see if there is a time, so that loading can complete display, lest very abrupt.