recherche

Maison >développement back-end >tutoriel php >Explication détaillée des méthodes et exemples d'implémentation PHP+Ajax de pagination sans actualisation

Explication détaillée des méthodes et exemples d'implémentation PHP+Ajax de pagination sans actualisation

墨辰丷
墨辰丷original
2018-06-04 10:00:442149parcourir

Cet article présente principalement la méthode PHP+Ajax pour obtenir une pagination sans actualisation. Il analyse en détail les étapes spécifiques et les techniques associées de PHP combinées avec ajax pour obtenir une pagination sans actualisation sous la forme d'un exemple complet. est également livré avec un code source de démonstration que les lecteurs peuvent télécharger et consulter. Les amis peuvent s'y référer

Remarque : Certaines des bibliothèques de classes utilisées ici peuvent trouver leurs codes sources dans les articles précédents, donc dans. Afin de raccourcir la longueur de l'article, les liens sont indiqués.

Cet article explique : implémentation Ajax de la pagination sans actualisation, principes d'implémentation, affichage du code et téléchargement du code.

Certaines connaissances doivent être expliquées ici :

1 Les avantages d'Ajax sans rafraîchir la page : offrir une bonne expérience client, obtenir des données de la base de données dans le. background via Ajax et affichez-le, en interdisant l'état vide qui apparaît en attendant le chargement de la page

2. Alors, la page Ajax non rafraîchie s'exécute-t-elle sur une page dynamique (.php) ? Ou une page statique (.html/.htm/.shtml) ? La réponse est : page statique ;

3. Principe de mise en œuvre : Les données renvoyées par la page dynamique sont obtenues et affichées grâce à la combinaison du programme de script JS frontal et d'Ajax.

D'accord, expliquons le code ci-dessous :

Puisqu'il s'exécute sur une page statique, nous créons d'abord une page HTML statique. La liste de codes de index.html est la suivante.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
  body {
    font-size:12px;
  }
</style>
</head>
<body>
  <p id="fpage">数据加载中...</p>
</body>
</html>

Dans la liste des codes, nous avons chargé une bibliothèque de classes Ajax, cette classe La bibliothèque peut être trouvée dans l'article précédent "Une bibliothèque de classes Ajax simple et un exemple d'analyse"

Dans cette page statique, seul un "Chargement de données..." sera affiché, et il n'y aura aucune donnée . À l'heure actuelle, nous avons besoin d'un script JS pour obtenir les données de la base de données via Ajax. Le script JS est le suivant : 

<script type="text/javascript">
  /**
  * setPage(url) 根据 url 从 article.php 中获取数据
  * @param int pageNum 页码
  * @return string
  */
  var cache=new Array(); // 缓存变量，当数据被访问过之后放置在缓存中，加快访问速度
  function setPage(pageNum) {
    var fpage = document.getElementById(&#39;fpage&#39;); // 获取 fpage 对象
    // 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
    if (typeof(cache[pageNum])==&#39;undefined&#39;) {
      var ajax = Ajax();
      ajax.get(&#39;article.php?page=&#39;+pageNum, function(data){
        fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的
        cache[pageNum] = data;
      })
    } else {
      fpage.innerHTML = cache[pageNum];
    }
  }
  setPage(1); // 默认执行
</script>

Lisez attentivement le code ci-dessus, vous retrouverez le phénomène suivant :

1. (pageNum) est une interface de fonction JS pour extraire des données de la base de données ;
2 Ajax obtient les données via le fichier article.php
3, où xx est les données du numéro de page ; à obtenir,
setPage(1) : Obtenez les données de la page 1 ;
setPage(2) : Obtenez les données de la page 2
setPage(100) : Obtenez les données de la page 100 ; 🎜>……

Alors, comment récupérer les données du fichier article.php ? Veuillez consulter la liste des codes ci-dessous.

article.php

<?php
/**
* $Id: article.php
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once &#39;./config.inc.php&#39;;
$m = new Model();
$page = new ajaxPage($m->total(&#39;article&#39;),20); // $m->total(&#39;article&#39;) 获取 article 表的记录数；10为每页显示十条
$result = $m->fetchAll(&#39;article&#39;, &#39;*&#39;, &#39;&#39;, &#39;&#39;, $page->limit); // 取出数据，^_^，很方便吧
echo &#39;<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">&#39;;
echo &#39;<caption><h1>华强电子网资讯</h1></caption>&#39;;
echo &#39;<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>&#39;;
foreach ($result as $v) {
  echo "<tr height=&#39;21&#39;><td align=&#39;center&#39;>{$v[&#39;id&#39;]}</td><td>{$v[&#39;title&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;author&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;source&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;date&#39;]}</td></tr>";
}
echo &#39;<tr><td align="right" colspan="5">&#39;.$page->fpage().&#39;</td></tr>&#39;;
echo &#39;</table>&#39;;
?>

Les données connectées dans article.php proviennent de l'article précédent de Huaqiang Réseau électronique Étant donné que les données d'informations capturées sont relativement volumineuses, le fichier article.sql sera joint au téléchargement du package de code pour que tout le monde puisse le tester.

Les données affichées sur la page statique index.html sont le code d'écho dans le fichier article.php.

Le fichier config.inc.php dans le fichier de code définit principalement certaines constantes, telles que : le nom d'utilisateur de la base de données, le mot de passe de la base de données, l'hôte..., la bibliothèque de classes de connexion à la base de données (Db.class.php) et la bibliothèque de classes d'opération de base de données (Modèle .class.php), veuillez vous référer à l'article "Analyse des exemples communs de bibliothèques de classes PDO de PHP", avec les instructions d'utilisation.

Rendu du programme :

L'image ci-dessous marque les endroits auxquels il faut prêter attention

De cette façon, Ajax n'a pas Actualiser la pagination et vous avez terminé. Il y a aussi un ajaxPage.class.php dans le programme qui n'est pas expliqué. En fait, l'utilisation de cette bibliothèque de classes ajaxPage est la même que celle de la bibliothèque de classes de pagination générale.

C'est-à-dire : $page = new ajaxPage (nombre total d'enregistrements, nombre d'affichages par page) ;

Résumé : ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas. utile à l’étude de chacun.

Recommandations associées :

Implémentation PHP de la fonction de code de vérification de connexion et de la méthode d'appel

php Conseils pour le traitement back-end du téléchargement de fichiers

Méthode PHP pour obtenir la première image d'un article sur le site Web sous forme de vignette

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Imitation de la création de commentaires NetEase, implémentation PHP+MysqlArticle suivant：Imitation de la création de commentaires NetEase, implémentation PHP+Mysql

Articles Liés

Voir plus