PHP和Ajax實作無刷新分頁功能代碼分享
- 小云云原創
- 2018-02-10 10:44:491396瀏覽
本文主要和大家介紹了PHP+Ajax實現的無刷新分頁功能,結合具體實例形式分析了php+ajax透過pdo操作類讀取資料庫並分頁顯示的相關實現技巧,並附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。
註：本文中使用到的一些類別庫在前面文章都能找到原始程式碼，我會在文中指明連結所在，為了縮短文章篇幅，由此帶來的閱讀不便，敬請諒解。
本文說明 Ajax 實作無刷新分頁、實作原理、程式碼展示、程式碼下載。
這裡需要說明一些知識：
1、Ajax 無刷新頁面的好處：提供良好的客戶體驗，透過Ajax 在後台從資料庫中取得資料並展示，取締了等待載入頁面而出現的空白狀態；
2、那麼，Ajax 無刷新頁面是運行在動態頁面（.php）？還是靜態頁面（.html/.htm/.shtml）？答案是：靜態頁面；
3、實作原理：透過前端 JS 腳本程式與 Ajax 結合取得從動態頁面傳回的數據，並顯示。
好了，下面進行程式碼講解：
既然，是運行在靜態頁面上，我們先建立一個靜態 HTML 頁面，index.html 的程式碼清單如下。
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>程式碼清單中，我們載入了一個Ajax 類別庫，這個類別庫可以在http://www.jb51. net/article/82066.htm 文章中找到（並附有使用方法）
在這個靜態頁面中，只會顯示一個“資料載入中....”，並沒有任何資料。這時，我們需要一個 JS 腳本來實作透過 Ajax 從資料庫中取得資料。 JS 腳本如下：
<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>#仔細閱讀上面的程式碼，您會發現下面現象：
1、setPage(pageNum) 是一個從資料庫中提取數據的JS 函數介面；
2、Ajax 是透過article.php 檔案來取得數據；
3、article.php?page=xx，這裡的xx 就是要取得的頁碼數據，
setPage( 1)：就是取得第1頁資料；
setPage(2)：就是取得第2頁資料；
setPage(100)：就是取得第100頁資料；
…
那麼，如何從article.php 檔案取得資料呢？請看下面程式碼清單。
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>';
?>article.php 中連接的數據是前面文章從華強電子網抓來的資訊數據，因為數據比較大，程式碼打包下載中會附加article.sql 文件，以便大家測試。
靜態頁面 index.html 上顯示的資料就是 article.php 檔案中 echo 的程式碼。
程式碼檔案中的config.inc.php 檔案主要是定義一些常數，例如：資料庫使用者名稱、資料庫密碼、主機…，資料庫連接類別庫（Db.class.php）和資料庫操作類函式庫（Model.class.php），請參考文章http://www.jb51.net/article/82063.htm，附有使用方法。
程式效果圖：
下圖示註的是注意關注的地方。
這樣，Ajax 無刷新分頁就完成了。程式中還有一個 ajaxPage.class.php 沒有說明，其實，這個 ajaxPage 類別庫的使用方法和一般的分頁類別庫是一樣的。
即：
$page = new ajaxPage(记录总数, 每页显示数);#
以上是PHP和Ajax實作無刷新分頁功能代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！