Comment réaliser Ajax sans déconnecter la liste de chargement des données en cliquant

Cette fois, je vais vous montrer comment implémenter Ajax sans déconnecter la liste de chargement des données en cliquant. Quelles sont les précautions pour qu'Ajax ne rompe pas la liste de chargement des données en cliquant. un cas pratique. Jetons un coup d'oeil.

Introduction à Ajax

AJAX est "Asynchrone Javascript Et XML" (Javascript asynchrone et XML) 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 universel standard).

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 accros du téléphone portable 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 des données ajax une par une, similaire à cette liste de données.

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

1. Idées

Généralement, si ajax est utilisé pour le chargement, toutes les données seront chargées en même temps. Cette fois, si vous souhaitez contrôler la quantité de chargement, vous en avez besoin. pour utiliser le jugement pour juger du chargement. Arrêtez le chargement lorsque 10 éléments sont chargés, puis cliquez sur le bouton pour continuer le chargement une fois les 10 éléments suivants chargés.

Que dois-je faire si je souhaite contrôler le chargement de seulement 10 éléments. 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;
　　}
}

Ensuite, vous devez en charger 10 de plus, puis appeler cette méthode, cette méthode doit donc déclarer un nom de fonction et l'appeler lorsque vous aurez besoin de l'utiliser la prochaine fois. vous devez transmettre des paramètres. C'est ok aussi. 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é, à quoi est-il lié à i, à quoi est-il 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), donc sa valeur ne peut pas être un nombre inchangé, mais ne peut être qu'une variable. Alors d'où vient la variable ? ? ?

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, c'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 un problème à résoudre à ce stade. 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 est-il chargé ? Que diriez-vous d'ajouter 1 au nombre de fois ?

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

Donc clickNum = parseInt((data.list.length)/10), quand clickNum == parseInt((data.list.length) /10), le bouton clic est masqué.

L'idée est fondamentalement claire

二、实现功能

HTML：

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

css：

此处省略css。

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>';
htmltxt += '<h5 class="date">'+date+'</h5>';
htmltxt += '<p class="income">'+data.list[i].profit+'%</p>';
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //点击的次数
$(".jiaZai_more").on('click', function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
nwalletProfit(iNum, clickNum);
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax怎么实现智能提示关联词搜索

jQuery.ajaxWebService请求WebMethod处理Ajax

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!