Ajax implémente un effet d'attente de chargement pour améliorer l'expérience utilisateur

Cette fois, je vais vous amener Ajax pour implémenter l'effet d'attente de chargement pour améliorer l'expérience utilisateur. Quelles sont les précautions Voici un cas pratique, jetons un coup d'œil.

Tout d'abord, 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é avec succès

Pas de bêtises, exécutez l'événement clic sur la page (<a sceneid="@scene.ID" href="<a href="http:/ /www.php.cn/ wiki/48.html" target="_blank">javascript<code>（<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)">生成</a>:void(0)" rel="nofollow externe" onclick

="build(this)">Generate)

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

Page backend Je ne l'écrirai plus. Le chemin passé en arrière-plan est configuré dans l'url. Le plus important est

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

. requêtes ajax asynchrones. Lorsque ajax est exécuté sur l'url, il y aura un fil de discussion en arrière-plan à exécuter,

success: function (data) le navigateur ajoutera un fil de discussion (je ne sais pas si c'est standard ou non). pour continuer l'exécution du programme suivant, allez sur

pour faire une pause et attendez que l'arrière-plan renvoie avec succès les données

De cette façon, l'image insérée auparavant équivaut à un chargement lorsque 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 : tout d'abord, faites une requête http GET pour obtenir le access_token de la plateforme publique WeChat, puis utilisez http Requête POST

pour obtenir le ticket en échange pour le 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation d'Ajax

Explication détaillée de l'interaction entre Ajax() et le contexte

Explication détaillée des étapes permettant à jQuery d'utiliser ajax pour obtenir des données inter-domaines

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!