Configuration de la boîte de chargement globale Ajax (Effet de chargement)-js tutoriel-php.cn

Configuration de la boîte de chargement globale Ajax (Effet de chargement)

亚连

Libérer： 2018-05-23 15:51:55

original

2835 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur la configuration de la boîte de chargement globale Ajax (effet de chargement). Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent se référer à

Demande de données de base en Ajax. Pendant le processus, nous voulons parfois que l'utilisateur sache que la page fait toujours quelque chose en arrière-plan. À ce stade, nous devons donner à l'utilisateur une invite très claire, c'est ce que nous appelons la barre de progression

Principe de mise en œuvre :

Jquery peut définir globalement ajax pour obtenir un effet orienté aspect similaire à celui de C#, c'est-à-dire que nous pouvons le définir avant qu'Ajax ne soit soumise et une fois la soumission terminée, effectuez une série d'opérations afin que nous puissions afficher la boîte de chargement au démarrage d'ajax, et une fois la requête ajax terminée, fermez la boîte de chargement, ce qui permet d'obtenir parfaitement cet effet.

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

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

Copier après la connexion

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 obtient 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. Si vous souhaitez le copier directement, 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 désactivés. Pour cela, je peux penser aux deux solutions suivantes :

■Ma solution actuelle est de le laisser en ouvrir plusieurs (les coordonnées sont). tout de même, 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, &#39;#393D49&#39;] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert(&#39;部分数据加载失败，可能会导致页面显示异常，请刷新后重试&#39;, {
skin: &#39;layui-layer-molv&#39;
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.