Heim > Artikel > Backend-Entwicklung > PHP und Ajax implementieren Code-Sharing für die Paging-Funktion ohne Aktualisierung
In diesem Artikel wird hauptsächlich die von PHP + Ajax implementierte Nicht-Aktualisierungs-Paging-Funktion vorgestellt und anhand spezifischer Beispiele die zugehörigen Implementierungstechniken von PHP + Ajax zum Lesen der Datenbank und Anzeigen im Paging analysiert Im Lieferumfang ist ein Demo-Quellcode enthalten, den die Leser als Referenz herunterladen können. Ich hoffe, dass er allen helfen kann.
Hinweis: Einige der in diesem Artikel verwendeten Klassenbibliotheken finden sich in früheren Artikeln, um die Länge des Artikels zu verkürzen , die resultierende Lesung Wir entschuldigen uns für die Unannehmlichkeiten.
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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>
Im Codelisting haben wir eine Ajax-Klassenbibliothek geladen, die unter http://www.index.html zu finden ist . Gefunden im Artikel jb51.net/article/82066.htm (mit Gebrauchsanweisungen)
Auf dieser statischen Seite wird nur „Daten werden geladen…“ angezeigt und es werden keine Daten angezeigt. 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('fpage'); // 获取 fpage 对象 // 如果缓存中存在数据,那么直接从缓存中读取;如果不存在数据,那么就从数据库中读取,并把数据存入缓存 if (typeof(cache[pageNum])=='undefined') { var ajax = Ajax(); ajax.get('article.php?page='+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. ist ein Slave aus der Datenbank-JS-Funktionsschnittstelle zum Extrahieren von Daten;
2. Ajax erhält Daten über die Datei „article.php?page=xx“. erhalten,
setPage(1): Holen Sie sich die Daten auf Seite 1;
setPage(2): Holen Sie sich die Daten auf Seite 2;
……
Wie erhält man also Daten aus der Datei „article.php“? 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 './config.inc.php'; $m = new Model(); $page = new ajaxPage($m->total('article'),20); // $m->total('article') 获取 article 表的记录数;10为每页显示十条 $result = $m->fetchAll('article', '*', '', '', $page->limit); // 取出数据,^_^,很方便吧 echo '<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">'; echo '<caption><h1>华强电子网资讯</h1></caption>'; echo '<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>'; foreach ($result as $v) { echo "<tr height='21'><td align='center'>{$v['id']}</td><td>{$v['title']}</td><td align='center'>{$v['author']}</td><td align='center'>{$v['source']}</td><td align='center'>{$v['date']}</td></tr>"; } echo '<tr><td align="right" colspan="5">'.$page->fpage().'</td></tr>'; echo '</table>'; ?>
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 Informationen zur Operationsklassenbibliothek (Model.class.php) finden Sie im Artikel http://www.jb51.net/article/82063.htm mit Anweisungen zur Verwendung.
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(记录总数, 每页显示数);Einfache Implementierung von Ajax ohne Aktualisierungs-Paging-Effekt PHP Ajax Kein Aktualisierungs-Paging, unterstützt Beispielcode für die ID-PositionierungJQuery+Ajax kein Aktualisierungs-Paging-Beispielcode
Das obige ist der detaillierte Inhalt vonPHP und Ajax implementieren Code-Sharing für die Paging-Funktion ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!