Chargement de l'effet d'attente avant qu'Ajax ne renvoie les données (tutoriel graphique)

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

Tout d'abord, nous passons les paramètres en arrière-plan via la requête ajax, puis l'arrière-plan passe une série d'opérations au premier plan Renvoyer les données, j'espère afficher un chargement.gif avant d'attendre que les données soient renvoyées avec succès

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

La page d'arrière-plan n'est pas écrite Le chemin passé en arrière-plan est configuré dans le fichier. URL. La chose la plus importante est

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

Cela doit prendre en compte les caractéristiques des requêtes ajax asynchrones. Lorsque ajax est exécuté sur l'URL, un fil de discussion. passera en arrière-plan pour l'exécution.

Le navigateur ajoutera un Le fil (je ne sais pas s'il est standard ou non) continue d'exécuter le programme suivant et fait une pause jusqu'à success: function (data) pour attendre. le retour réussi des données de l'arrière-plan

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

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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser la méthode ajax.load() dans jQuery

Ajax+ PHP pour l'interaction des données (avec code)

Formulaire de tableau de réception Ajax+Struts2 (avec code)

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!