PHP+Ajax实现无刷新分页实例详解(附demo源码下载)


Posted in PHP onApril 07, 2016

本文实例讲述了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 类库,这个类库可以在 前面一篇《一个简单Ajax类库及使用方法实例分析》中找到

在这个静态页面中,只会显示一个“数据加载中....”,并没有任何数据。这时,我们就需要一个 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),请参考文章 《PHP的PDO常用类库实例分析》,附有使用方法。

程序效果图:

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

PHP+Ajax实现无刷新分页实例详解(附demo源码下载)

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

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

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

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

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

PHP 相关文章推荐
PHP定时自动生成静态HTML的实现代码
Jun 20 PHP
php错误级别的设置方法
Jun 17 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
Mar 11 PHP
php快递单号查询接口使用示例
May 05 PHP
php中json_encode UTF-8中文乱码的更好解决方法
Sep 28 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
Dec 09 PHP
PHP中利用sleep函数实现定时执行功能实现代码
Aug 25 PHP
php 根据自增id创建唯一编号类
Apr 06 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
Nov 17 PHP
实例说明js脚本语言和php脚本语言的区别
Apr 04 PHP
详解php命令注入攻击
Apr 06 PHP
PHP中->和=>的意思
Mar 31 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
Apr 07 #PHP
PHP的PDO常用类库实例分析
Apr 07 #PHP
PHP安全下载文件的方法
Apr 07 #PHP
php生成验证码,缩略图及水印图的类分享
Apr 07 #PHP
PHP使用token防止表单重复提交的方法
Apr 07 #PHP
PHP使用Mysqli类库实现完美分页效果的方法
Apr 07 #PHP
Linux下编译redis和phpredis的方法
Apr 07 #PHP
You might like
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JSONP之我见
2015/03/24 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python config文件的读写操作示例
2019/09/27 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
Android笔试题总结
2014/11/29 面试题
应届生如何写自荐信
2014/01/05 职场文书
个人租房协议书
2014/04/09 职场文书
新闻编辑求职信
2014/04/09 职场文书
安全保证书范文
2014/04/29 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
考试作弊检讨
2015/01/27 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
辞职申请书范本
2019/05/20 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers