Ajax implements loading waiting effect to improve user experience

This time I will bring you Ajax to implement the loading waiting effect to improve the user experience. What are the precautions. The following is a practical case, let’s 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%20href=" http: 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)

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  src="/static/imghwm/default1.png" data-src="/images/load.gif" class="lazy" alt="Ajax implements loading waiting effect to improve user experience" >');
   },
   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="/static/imghwm/default1.png" data-src="/image/' + localkey + '" class="lazy" alt="Ajax implements loading waiting effect to improve user experience" >');
   },
   complete: function () {
    $('#load').remove();
   }
  });
 }

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

beforeSend: function () { jqSender.hide().after('<img  src="/static/imghwm/default1.png" data-src="/images/load.gif" class="lazy" alt="Ajax implements loading waiting effect to improve user experience" >'); },

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

the browser will add a thread (I don’t know if this is standard) and continue to execute the subsequent program until success: function (data)pauses and waits for a successful return from the background 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:

Detailed explanation of the steps to use Ajax

Detailed explanation of the interaction between Ajax() and the background

Detailed explanation of the steps for jQuery to use ajax to obtain data across domains

The above is the detailed content of Ajax implements loading waiting effect to improve user experience. For more information, please follow other related articles on the PHP Chinese website!