Comment créer un effet d'animation en attente de chargement avant qu'Ajax ne renvoie les données

Cette fois, je vais vous montrer comment créer un effet d'animation en attente de chargement avant qu'Ajax ne renvoie des données. Quelles sont les précautions pour créer un effet d'animation en attente de chargement avant qu'Ajax ne renvoie des données. Ce qui suit est un cas pratique. . Levez-vous et jetez un œ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 click 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();
   }
  });
 }

Le La page d'arrière-plan n'écrira pas l'URL. Le chemin passé à l'arrière-plan est configuré. La chose la plus importante est

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

. Cela doit prendre en compte les caractéristiques des requêtes ajax asynchrones lorsque ajax est exécuté. url, un fil passera en arrière-plan pour exécution. ,

success: function (data)Le navigateur ajoutera un fil (je ne sais pas s'il est standard ou non) pour continuer à exécuter le programme suivant, puis

faites une pause pour attendre que l'arrière-plan renvoie avec succès les données

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

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 soit affiché. Si le temps est relativement court, vous pouvez vérifier en ligne s'il y a une heure définie pour que le chargement puisse être affiché complètement. 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 :

Comment implémenter une requête interdomaine WebApi Ajax à l'aide de CORS

Comment implémenter le chargement dynamique de combos avec Ajax (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!