PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】


Posted in PHP onJuly 03, 2017

本文实例讲述了PHP+Ajax实现的无刷新分页功能。分享给大家供大家参考,具体如下:

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解。

本文讲解 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>
 <div id="fpage">数据加载中...</div>
</body>
</html>

代码清单中,我们加载了一个 Ajax 类库,这个类库可以在 https://3water.com/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),请参考文章https://3water.com/article/82063.htm,附有使用方法。

程序效果图:

下图标注的是注意关注的地方。

PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

这样,Ajax 无刷新分页就完成了。程序中还有一个 ajaxPage.class.php 没有说明,其实,这个 ajaxPage 类库的使用方法和一般的分页类库是一样的。

即:

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

具体细节请大家下载代码阅读即可。

完整代码点击此处本站下载

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
用PHP连接Oracle数据库
Oct 09 PHP
批量获取memcache值并按key的顺序返回的实现代码
Jun 14 PHP
鸡肋的PHP单例模式应用详解
Jun 03 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
Jun 03 PHP
PHP队列用法实例
Nov 05 PHP
thinkPHP学习笔记之安装配置篇
Mar 05 PHP
php中PDO方式实现数据库的增删改查
May 17 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
Apr 12 PHP
深入理解PHP之源码目录结构与功能说明
Jun 01 PHP
php使用GD2绘制几何图形示例
Feb 15 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
Jul 21 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
Aug 17 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
Jul 03 #PHP
php获取文章内容第一张图片的方法示例
Jul 03 #PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
Jul 03 #PHP
PHP不使用内置函数实现字符串转整型的方法示例
Jul 03 #PHP
利用PHP判断是否是连乘数字串的方法示例
Jul 03 #PHP
使用Zttp简化Guzzle 调用
Jul 02 #PHP
详解php几行代码实现CSV格式文件输出
Jul 01 #PHP
You might like
php4的彩蛋
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
js中的this关键字详解
2013/09/25 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python如何删除列为空的行
2020/07/17 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
个人简历自我评价
2014/01/06 职场文书
运动会广播稿200米
2014/01/27 职场文书
家长写给孩子的评语
2014/04/18 职场文书
大学新生军训方案
2014/05/03 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers