suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  So implementieren Sie eine aktualisierungsfreie Paging-Funktion mit PHP+Ajax

So implementieren Sie eine aktualisierungsfreie Paging-Funktion mit PHP+Ajax

墨辰丷
墨辰丷Original
2018-05-21 09:41:071600Durchsuche

Dieser Artikel stellt hauptsächlich die von PHP+Ajax implementierte aktualisierungsfreie Paging-Funktion vor. Er analysiert die zugehörigen Implementierungstechniken von PHP+Ajax, um die Datenbank anhand spezifischer Beispiele zu lesen und anzuzeigen wird mit Demo-Quellcode zum Herunterladen geliefert. Freunde, die ihn benötigen, können sich auf

beziehen. Die Details sind wie folgt:

Hinweis: Einige davon Die in diesem Artikel verwendeten Klassenbibliotheken finden Sie im vorherigen Artikel. Um die Länge des Artikels zu kürzen, geben Sie bitte die Position des Links im Artikel an. Wir entschuldigen uns für die Unannehmlichkeiten, die Ihnen beim Lesen entstanden sind.

In diesem Artikel werden die Ajax-Implementierung von aktualisierungsfreiem Paging, Implementierungsprinzipien, Codeanzeige und Code-Download erläutert.

Einige Kenntnisse müssen hier erklärt werden:

1. Die Vorteile von Ajax ohne Aktualisierung der Seite: Bieten Sie ein gutes Kundenerlebnis, beziehen Sie Daten aus der Datenbank im Hintergrund über Ajax und zeigen Sie sie an und das Warten auf das Laden der Seite entfällt.

2 Läuft die Ajax-Seite ohne Aktualisierung auf einer dynamischen Seite (.php)? Oder eine statische Seite (.html/.htm/.shtml)? Die Antwort lautet: statische Seite;

3. Implementierungsprinzip: Die von der dynamischen Seite zurückgegebenen Daten werden durch die Kombination von Front-End-JS-Skriptprogramm und Ajax abgerufen und angezeigt.

Okay, lassen Sie uns den folgenden Code erklären:

Da er auf einer statischen Seite ausgeführt wird, erstellen wir zunächst eine statische HTML-Seite. Die Codeliste von index.html lautet wie folgt.

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>


In der Codeliste haben wir eine Ajax-Klassenbibliothek in diese statische Seite geladen. Es wird nur „Daten werden geladen...“ angezeigt und es sind keine Daten vorhanden. Zu diesem Zeitpunkt benötigen wir ein JS-Skript, um Daten aus der Datenbank über Ajax abzurufen. Das JS-Skript lautet wie folgt: 


<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>


Lesen Sie den obigen Code sorgfältig. Sie werden das folgende Phänomen feststellen:

1. setPage (pageNum) ist eine JS-Funktionsschnittstelle zum Extrahieren von Daten aus der Datenbank
2 Was soll abgerufen werden? Die Seitenzahldaten:
setPage(1): dient zum Abrufen der Daten auf der 1. Seite;
setPage(2): dient zum Abrufen der Daten auf der 2. Seite; (100): dient dazu, die Daten auf der 100. Seite abzurufen; Bitte beachten Sie die Codeliste unten.

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;;
?>


article.php Die in Article.php verbundenen Daten werden vom Huaqiang Electronics Network abgerufen im vorherigen Artikel Da die Daten relativ groß sind, wird die Datei „article.sql“ an den Download des Codepakets angehängt, damit jeder sie testen kann.


Die auf der statischen Seite index.html angezeigten Daten sind der Echocode in der Datei „article.php“.

Die Datei config.inc.php in der Codedatei definiert hauptsächlich einige Konstanten, wie zum Beispiel: Datenbankbenutzername, Datenbankkennwort, Host ..., Datenbankverbindungsklassenbibliothek (Db.class.php) und Datenbank Operationsklassenbibliothek (Model.class.php).

Programm-Rendering:

Die folgende Abbildung markiert die Stellen, auf die man achten sollte.

Auf diese Weise wird das Ajax-Non-Refresh-Paging abgeschlossen. Es gibt auch eine ajaxPage.class.php im Programm, die nicht erklärt wird. Tatsächlich ist die Verwendung dieser ajaxPage-Klassenbibliothek dieselbe wie die der allgemeinen Paging-Klassenbibliothek.

Das heißt: 

$page = new ajaxPage(记录总数, 每页显示数);


Verwandte Empfehlungen:


Einfache Implementierung von Ajax

Keine Aktualisierungs-Paging

Wirkung

PHP Ajax
Keine Aktualisierungs-Paging

, unterstützt Beispielcode für die ID-Positionierung

Einfaches Ajax
Kein Aktualisierungs-Paging

Effect_AJAX bezogen



Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine aktualisierungsfreie Paging-Funktion mit PHP+Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ThinkPHPs Methode zur Implementierung von Abfrage- und Paging-Funktionen für mehrere TabellenNächster Artikel：ThinkPHPs Methode zur Implementierung von Abfrage- und Paging-Funktionen für mehrere Tabellen

In Verbindung stehende Artikel

Mehr sehen