php ajax jquery implémente cliquez pour charger plus de content_jquery

Nous pouvons rencontrer une telle application sur certains sites Web Weibo. La liste de contenu Weibo n'utilise pas de barres de pagination, mais un certain nombre d'enregistrements sont chargés en même temps et affichés sur la page de la liste. de la page de liste, il peut cliquer sur « Afficher plus » pour charger plus d'enregistrements. Dans cet article, je vais vous expliquer comment implémenter cette application en utilisant jQuery et PHP.

Principe de base : Lorsque la page est chargée, jQuery demande des données en arrière-plan, et PHP affiche les derniers enregistrements sur la page de liste en interrogeant la base de données. Il y a un lien "plus" en bas de la page de liste. déclenchant le lien, Envoyez une requête Ajax au serveur. Le programme PHP en arrière-plan récupère les paramètres de la requête et répond Il obtient les enregistrements correspondants de la base de données et les renvoie à la page front-end sous forme de JSON Le front-end. page jQuery analyse les données JSON et ajoute les données à la page de liste. En fait, c'est l'effet de pagination Ajax.

Tout d'abord, nous devons présenter la bibliothèque jquery et le plug-in jquery.more.js. jquery.more.js a déjà encapsulé de nombreuses fonctions et fourni la fonction de configuration des paramètres.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.more.js"></script> 

La structure xhtml est la suivante :

<div id="more"> 
   <div class="single_item"> 
      <div class="element_head"> 
        <div class="date"></div> 
        <div class="author"></div> 
      </div> 
      <div class="content"></div> 
   </div> 
   <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
</div> 

Il convient de mentionner que les styles single_item et get_more sont liés au plug-in jquery.more.js. Vous pouvez également choisir un autre nom de classe, mais vous devez écrire la classe correspondante lors de la configuration.

CSS

#more{margin:10px auto;width: 560px; border: 1px solid #999;}        
.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} 
.author{position: absolute; left: 0px; font-weight:bold; color:#39f} 
.date{position: absolute; right: 0px; color:#999} 
.content{line-height:20px; word-break: break-all;} 
.element_head{width: 100%; position: relative; height: 20px;} 
.get_more{margin:10px; text-align:center} 
.more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) 
 no-repeat;} 

Le CSS ci-dessus est personnalisé dans cet exemple. Bien sûr, vous pouvez personnaliser différents styles dans des projets réels. Notez que more_loader_spinner définit le chargement d'images animées.

jQuery

$(function(){ 
  $('#more').more({'address': 'data.php'}) 
}); 

C'est très simple à utiliser. Configurez l'adresse du backend : data.php pour voir comment data.php traite les données.

PHP

data.php renvoie à la base de données. Cet exemple utilise la même table de données que l'article de ce site.

require_once('connect.php'); 
 
$last = $_POST['last']; 
$amount = $_POST['amount']; 
 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$query=mysql_query("select * from say order by id desc limit $last,$amount"); 
while ($row=mysql_fetch_array($query)) { 
  $sayList[] = array( 
    'content'=>$row['content'], 
    'author'=>$user[$row['userid']], 
    'date'=>date('m-d H:i',$row['addtime']) 
   ); 
} 
echo json_encode($sayList); 

data.php reçoit deux paramètres soumis par la page d'accueil. $_POST['last'] est le nombre d'enregistrements à démarrer, et $_POST['amount'] est le nombre d'enregistrements affichés à la fois. comprenez-le en regardant l'instruction SQL. En fait, ce sont les instructions utilisées dans la pagination.

Ensuite, affichez les résultats de la requête au format JSON et la tâche PHP est terminée.

Enfin, jetons un œil à la configuration des paramètres de jquery.more.js.

'amount' : '10', //Le nombre d'enregistrements affichés à chaque fois
'address' : 'comments.php', //Demander l'adresse du fond
'format' : 'json', //Format de transmission des données
'template' : '.single_item', //html enregistre l'attribut de classe de DIV
'trigger' : '.get_more', //Attribut de classe qui déclenche le chargement de plus d'enregistrements
'scroll' : 'false', //Si le chargement du déclencheur de défilement est pris en charge
'offset' : '100', //Décalage lors du défilement déclenche le chargement

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.