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之require/include顺序 推荐
Jan 02 PHP
php字符编码转换之gb2312转为utf8
Oct 28 PHP
php实现邮件发送并带有附件
Jan 24 PHP
php创建sprite
Feb 11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
Jun 23 PHP
destoon实现底部添加你是第几位访问者的方法
Jul 15 PHP
PHP自动生成表单代码分享
Jun 19 PHP
php实现搜索类封装示例
Mar 31 PHP
PHP中类属性与类静态变量的访问方法示例
Jul 13 PHP
PHP入门教程之图像处理技巧分析
Sep 11 PHP
PHP实现统计在线人数功能示例
Oct 15 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
Oct 25 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
数据库的日期格式转换
2006/10/09 PHP
完美解决PHP中文乱码
2009/11/26 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
arguments对象
2006/11/20 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python中__name__的使用实例
2015/04/14 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python实现大文件排序的方法
2015/07/10 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
新大陆软件面试题
2016/11/24 面试题
资料员的岗位职责
2013/11/20 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
中专生的个人自我评价
2013/12/11 职场文书
班组长安全职责
2014/01/05 职场文书
小学生元旦广播稿
2014/02/21 职场文书
文明工地标语
2014/06/16 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
北京故宫导游词
2015/01/31 职场文书
培训简讯范文
2015/07/20 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
Docker下安装Oracle19c
2022/04/13 Servers