Detaillierte Erläuterung der Methoden und Beispiele der PHP+Ajax-Implementierung von Non-Refresh-Paging-PHP-Tutorial-php.cn

Detaillierte Erläuterung der Methoden und Beispiele der PHP+Ajax-Implementierung von Non-Refresh-Paging

墨辰丷

Freigeben： 2023-03-29 16:26:01

Original

2124 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode von PHP + Ajax zum Erzielen von aktualisierungsfreiem Paging vorgestellt. Er analysiert detailliert die spezifischen Schritte und zugehörigen Techniken von PHP in Kombination mit Ajax, um ein aktualisierungsfreies Paging zu erreichen Enthält außerdem einen Demo-Quellcode, den Leser herunterladen und nachschlagen können.

Hinweis: Einige der hier verwendeten Klassenbibliotheken finden ihre Quellcodes in früheren Artikeln, also in Um die Länge des Artikels zu kürzen, sind die Links angegeben.

Dieser Artikel erklärt: Ajax-Implementierung von aktualisierungsfreiem Paging, Implementierungsprinzipien, Codeanzeige und Code-Download.

Einige Kenntnisse müssen hier erklärt werden:

1. Die Vorteile von Ajax ohne Aktualisierung der Seite: Bieten Sie ein gutes Kundenerlebnis und beziehen Sie Daten aus der Datenbank in Hintergrund durch Ajax und zeigen Sie es an, wodurch der leere Status, der beim Warten auf das Laden der Seite angezeigt wird, verboten wird.

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>

Nach dem Login kopieren

In der Codeliste haben wir eine Ajax-Klassenbibliothek geladen, die gefunden werden kann im vorherigen Artikel „Eine Analyse einer einfachen Ajax-Klassenbibliothek und Anwendungsbeispiele“

Auf dieser statischen Seite 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>

Nach dem Login kopieren

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

1 ) ist eine JS-Funktionsschnittstelle zum Extrahieren von Daten aus der Datenbank;
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; ……

Also, wie bekomme ich 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 &#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;;
?>

Nach dem Login kopieren

Die in Article.php verbundenen Daten wurden zuvor vom Huaqiang Electronics Network abgerufen 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 Datenbankbetriebsklassenbibliothek (Modell .class.php) finden Sie im Artikel „Analyse gängiger PDO-Klassenbibliotheksbeispiele von PHP“ mit Anweisungen zur Verwendung.

Programmwiedergabe:

Das Bild unten markiert die Stellen, auf die Sie achten sollten

Auf diese Weise Ajax hat keine Aktualisierung der Paginierung und schon sind Sie fertig. 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 (Gesamtzahl der Datensätze, Anzahl der Anzeigen pro Seite);

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass es so sein wird hilfreich für das Lernen aller.

Verwandte Empfehlungen:

PHP-Implementierung der Funktion und Aufrufmethode des Anmeldebestätigungscodes

php

Tipps für die Back-End-Verarbeitung beim Hochladen von Dateien
PHP-Methode, um das erste Bild eines Artikels auf der Website als Miniaturansicht zu erhalten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methoden und Beispiele der PHP+Ajax-Implementierung von Non-Refresh-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!