Ajax cliquez pour charger en continu la liste des données (tutoriel graphique)-js tutoriel-php.cn

Ajax cliquez pour charger en continu la liste des données (tutoriel graphique)

亚连

Libérer： 2018-05-23 16:07:49

original

2491 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur Ajax en cliquant pour charger en continu la liste de données. Les amis qui en ont besoin peuvent s'y référer

Introduction à Ajax<.>

AJAX signifie « Asynchronous Javascript And XML » (Javascript et XML asynchrones), qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage standard généralisé).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Il existe différentes méthodes et idées pour implémenter chaque fonction. Aujourd'hui, je vais résumer une de mes petites fonctions de chargement.

Le chargement est très courant et tous les utilisateurs de téléphones portables la connaissent très bien. Chaque fois que nous parcourons Weibo, Moments, Space, etc., lorsque nous glissons jusqu'à un certain montant, il nous sera rappelé de glisser vers le haut pour charger davantage. C'est une façon de charger, l'autre est de cliquer pour charger, de cliquer pour charger. charger un certain montant, puis cliquer, puis charger un certain montant (beaucoup de bêtises).

Parlons maintenant du chargement ajax des données une par une, une liste de données comme celle-ci.

Affichez d'abord 10, puis cliquez pour en charger davantage, puis affichez 10...

1. Idées

Généralement, si vous utilisez ajax pour charger, toutes les données seront chargées en même temps. le chargement doit être contrôlé. Ensuite, vous devez faire preuve de jugement pour arrêter le chargement lorsque 10 éléments sont chargés, puis cliquer sur le bouton pour continuer le chargement une fois les 10 éléments suivants chargés.

Que faire si vous souhaitez contrôler seulement 10 charges. Vous ne pouvez pas juger 10 en parcourant i, car après avoir chargé 10, vous devez charger plus tard, il est donc difficile de juger les 10 suivants, vous devez donc définir une nouvelle variable pour calculer le nombre de chargés,

peut être écrit comme ceci :

var ci = 0;
for(var i = 0; i < data.list.length; i++){
　　ci++; 
　　if(ci> 10){
　　break;
　　}
}

Copier après la connexion

Ensuite, vous devez en charger 10 de plus puis appeler cette méthode, donc cette méthode nécessite Déclarez un nom de fonction et appelez-le la prochaine fois que vous en aurez besoin. Vous pouvez également transmettre des paramètres si vous en avez besoin. Maintenant, il y a une autre question. Après avoir chargé 10 données pour la première fois, je dois charger les 10 premières données, puis les données json suivantes. Que dois-je faire ? ? ?

Ce n'est pas grave, vous pouvez appeler la fonction définie ci-dessus puis passer les paramètres. Comment calculer les paramètres ? ? ?

Réfléchissez d'abord à ce à quoi un paramètre est lié, et il est lié à i. À quoi est-ce que je suis lié ? Ou qu'est-ce qui peut m'affecter ?

Il semble que seule sa valeur sera affectée (n'est-ce pas un non-sens), dans ce cas sa valeur ne peut pas être un nombre inchangé, mais ne peut être qu'une variable, alors d'où vient la variable de ? Du drap de laine ? ? ?

N'oubliez pas que nous avons également un événement click. Définissez d'abord une variable pour le nombre de clics var clickNum = 0, car il y en a 10 pour chaque chargement, donc la valeur de i devrait être. :

i = 10*clickNum, qui est la valeur d'index de la première donnée chargée à chaque fois. De cette façon, nous avons résolu le problème ci-dessus.

Il y a encore des problèmes à résoudre pour le moment. Lorsque toutes les données sont cliquées pour être chargées, le bouton cliqué doit être masqué. Alors, comment calculer que les données sont chargées ? ? ?

Nous pouvons le calculer par le nombre de clics clickNum, car 10 sont chargés à chaque fois, nous pouvons donc calculer le nombre total de fois qui doivent être chargés parseInt((data.list.length) /10)+1, Pourquoi faut-il augmenter le nombre de chargements de 1 ?

Parce que parseInt() est arrondi, par exemple 21/10=2, mais il doit en fait être chargé 3 fois, donc 1 est ajouté par coïncidence, nous n'avons pas besoin de cliquer sur le. premier chargement, le navigateur a Après le chargement, 10 éléments de données sont lus,

donc clickNum = parseInt((data.list.length)/10), lorsque clickNum == parseInt((data. list.length)/10 ) pour masquer le bouton de clic.

L'idée est fondamentalement claire

2. Implémenter des fonctions

<🎜. > HTML :

<dl id="incomeNum">
　　<dt><em></em>每日分配收益</dt>
</dl>
<p class="jiaZai_more">点击查看更多</p>

Copier après la connexion

css :

Omettre les CSS ici .

js :

function nwalletProfit(num, cNum){
$.ajax({
type: "post",
async: true,
url: url,
dataType: "json",
success: function (data) {
if (data.list.length > 0){
var i = num;
var ci= 0;
var x = parseInt((data.profit_list.length)/10);//x为每10个一组的组数
if(cNum >= x){
$(".jiaZai_more").hide(); //当点击更多的次数 ≥ 组数时，隐藏按钮
}
for(; i < data.profit_list.length; i++){
var htmltxt = "";
ci++; 
var date = data.profit_list[i].date;
var year = date.substring(0, 4);
var month = date.substring(4, 6);
var day = date.substring(6);
date = year+&#39;年&#39;+month+&#39;月&#39;+day+&#39;日&#39;;
htmltxt += &#39;<dd>&#39;;
htmltxt += &#39;<h5 class="date">&#39;+date+&#39;</h5>&#39;;
htmltxt += &#39;<p class="income">&#39;+data.list[i].profit+&#39;%</p>&#39;;
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //点击的次数
$(".jiaZai_more").on(&#39;click&#39;, function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
nwalletProfit(iNum, clickNum);
});

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.