Ajax implémente l'effet de chargement

Cette fois, je vais vous amener Ajax pour implémenter l'effet Loading. Quelles sont les précautions pour qu'Ajax implémente l'effet Loading. Ce qui suit est un cas pratique, jetons un coup d'œil.

Pendant le processus de demande de données d'arrière-plan Ajax, nous voulons parfois que l'utilisateur sache que l'arrière-plan de la page fait toujours quelque chose. À ce stade, nous devons donner à l'utilisateur une invite très claire, ce que nous faisons. appelez Barre de progression

Principe de mise en œuvre :

Jquery peut définir ajax globalement pour obtenir un résultat similaire à l'effet orienté aspect en C#, c'est-à-dire que nous pouvons effectuer une série d'opérations sur Ajax avant et après la fin de la soumission, afin que nous puissions afficher la boîte de chargement au démarrage d'ajax et lorsque la requête ajax est terminée. Après cela, fermez la boîte de chargement et obtenez parfaitement cet effet.

La façon dont Jquery configure globalement Ajax est la suivante :

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

Bien sûr, ces configurations de beforeSend/complete/error sont également dans un ajax unique Vous pouvez le configurer, l'écrire dans ajaxSetup et le mettre sur la page publique, ce sera global~

Enfin, veuillez présenter le code quand je le faisais ici, par souci de commodité. , J'ai utilisé layer directement. Ce plug-in implémente l'effet de chargement sans écrire manuellement du CSS. Après tout, ce n'est pas notre force. Les étudiants qui en sont capables peuvent écrire eux-mêmes l'effet de chargement et utiliser js pour contrôler manuellement son affichage et son masquage. vous souhaitez le copier directement, alors veuillez introduire layer, portal : http://layer.layui.com/

Une chose qui doit être expliquée ici est que lorsqu'il y a plusieurs ajax en même temps, l'un peut être chargé et les autres seront tous éteints. Pour cela, je peux penser aux deux solutions suivantes :

■Ma solution actuelle est de le laisser en ouvrir plusieurs (les coordonnées sont toutes). la même chose, donc vous ne pouvez pas les voir), puis fermez-les. Quand cela se termine, fermez-le simplement. Ce que je fais ici, c'est ajouter un paramètre d'index à ajaxSetup (cette chose ne peut être écrite que dans l'objet défini, sinon. tous les ajax partagent toujours le même). Avec index, il devrait simplement jouer ce que vous voulez.

■ Il existe une autre solution adaptée pour écrire vous-même cette logique de contrôle. Affichez uniquement une boîte de chargement et écrivez sur la boîte de chargement combien de paramètres ajax sont actuellement en cours d'exécution, similaire à

, chaque fois qu'il démarre ou se termine, conservez la valeur d'ajax-cout et jugez quand ajax se termine, si le nombre de données ajax est inférieur ou égal à 0, il devrait être possible de cacher p, mais je n'ai pas pratiqué cette méthode.

$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});

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 php chinois !

Lecture recommandée :

Explication détaillée des étapes d'appel de la fonction de contrôle ajax+php

Explication détaillée de l'utilisation d'AJAX file d'attente des demandes

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!