Heim > Artikel > Backend-Entwicklung > PHP und Ajax implementieren Code-Sharing für die Paging-Funktion ohne Aktualisierung

PHP und Ajax implementieren Code-Sharing für die Paging-Funktion ohne Aktualisierung

小云云Original: 2018-02-10 10:44:491402Durchsuche

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(&#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. 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

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

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

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

JQuery+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!

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：Beispiel für eine thinkPHP-Abfragemethode mit mehreren TabellenNächster Artikel：Beispiel für eine thinkPHP-Abfragemethode mit mehreren Tabellen

In Verbindung stehende Artikel

Mehr sehen