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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
Jun 21 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
Jul 01 PHP
在PHP中设置、使用、删除Cookie的解决方法
May 06 PHP
php的declare控制符和ticks教程(附示例)
Mar 21 PHP
php过滤html标记属性类用法实例
Sep 23 PHP
php上传图片客户端和服务器端实现方法
Mar 30 PHP
php in_array() 检查数组中是否存在某个值详解
Nov 23 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
Sep 22 PHP
Laravel框架生命周期与原理分析
Jun 12 PHP
php实现数组中出现次数超过一半的数字的统计方法
Oct 14 PHP
laravel-admin 实现给grid的列添加行数序号的方法
Oct 08 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
Oct 16 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数据库连接
2006/10/09 PHP
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python定时关机小脚本
2018/06/20 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python适合人工智能的理由和优势
2019/06/28 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
初中同学聚会感言
2014/02/11 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
党员评议个人总结
2014/10/20 职场文书
岳麓书院导游词
2015/02/03 职场文书
保留意见审计报告
2015/06/05 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python