Maison >interface Web >js tutoriel >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
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/' + localkey + '" />'); }, 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
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!