À propos de la méthode d'implémentation de l'effet d'attente de chargement avant qu'Ajax ne renvoie les données

Nous le savons tous lorsque nous chargeons certaines pages. Une page de chargement en attente apparaîtra. Nous transmettons les paramètres au backend via une requête ajax, puis le backend renvoie les données au frontend après une série d'opérations. J'espère afficher un chargement.gif avant d'attendre que les données soient renvoyées. avec succès. Ensuite, à travers cet article, je partagerai avec vous l'effet d'attente de chargement avant qu'Ajax ne renvoie les données. Les amis qui en ont besoin peuvent s'y référer.

Pas de bêtises, exécutez l'événement click sur la page （<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>)

Appelez la méthode suivante :

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();
   }
  });
 }

Le la page d'arrière-plan est que je ne l'écrirai plus. Le chemin passé vers l'arrière-plan est configuré dans l'URL. Le plus important est

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

. en compte les caractéristiques des requêtes ajax asynchrones. Lorsque ajax est exécuté Lorsque l'url est saisie, un thread passera en arrière-plan pour l'exécution

Le navigateur ajoutera un thread (je ne sais pas si c'est standard. ou non) pour continuer à exécuter le programme suivant, puis success: function (data) fera une pause et attendra que l'arrière-plan réussisse

De cette façon, l'image insérée auparavant équivaut à un chargement. les données sont renvoyées avec succès, supprimez l'image avant et écrivez-la dans l'instruction complete: function ().

Mon flux de traitement en arrière-plan ressemble à peu près à ceci : commencez par faire une requête http GET pour obtenir le access_token de la plateforme publique WeChat, puis utilisez une requête http POST pour obtenir le ticket en échange du code QR WeChat.

Utilisez ensuite la méthode WebClient pour télécharger le code QR demandé sur le stockage local, puis ajoutez, supprimez, vérifiez et modifiez la base de données pour afficher le code QR sur la page Web.

Une période de temps aussi longue laisse suffisamment de temps pour que le chargement s'affiche. Si le temps est relativement court, vous pouvez vérifier en ligne si une heure a été définie pour que le chargement puisse être affiché complètement ainsi. pour ne pas être trop brusque.

Recommandations associées :

Comment charger le didacticiel de méthode d'animation pour le composant de chargement d'applet WeChat

Comment résoudre plusieurs pages ajax Requête, problème de blocage de chargement de page

Quelles sont les animations de chargement ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!