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

本文实例讲述了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常用类库实例分析》,附有使用方法。

程序效果图:

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

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

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

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

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

更多关于PHP相关内容感兴趣的读者可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP运算与运算符用法总结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php操作office文档技巧总结(包括word,excel,access,ppt)》、《php日期与时间用法总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax
, php
无刷新分页
java实现ajax分页demo、jquery ajax 分页demo、ajax分页实例、jquery ajax分页实例、php ajax分页实例,以便于您获取更多的相关知识。

时间: 2024-10-23 10:03:51

PHP+Ajax实现无刷新分页实例详解(附demo源码下载)_php技巧的相关文章

jQuery自定义动画函数实例详解(附demo源码)_jquery

本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d

php+ajax无刷新分页实例详解_php技巧

本文实例讲述了php+ajax无刷新分页实现方法.分享给大家供大家参考,具体如下: ajax_page_show_userinfo.php页面如下: <meta 'Content:text/html;charset=utf-8'></meta> <title>ajax分页演示</title> <script language="javascript" src="js/ajaxpage.js"></sc

Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)_php实例

本文实例讲述了Zend Framework入门之环境配置及第一个Hello World程序.分享给大家供大家参考,具体如下: 第一步:确认你的PHP环境: 1.请PHPer确认你的PHP版本是否在5.2.0以上..如果不是的话..请更新到5.2.0,否则.Zend Framework 好像用不了..我自己有试过. 遇到过这样的问题..所以请你们自己测试一下..PHP源码最新版下载地址为:http://www.php.net/downloads.php. 2.你的PHP环境配置好了之后,请打开ph

.NET Ajax的无刷新技术实例详解

ajax|刷新|无刷新|详解 下载一个.net Ajax开发包,该开发包包括ASP2.0和目前ASP1.1版使用的Ajax,详细地址参见http://ajax.schwarz-interactive.de/,接下来,开始. 1. 新建一个项目,在引用中添加引用Ajax.dll,Ajax.dll位于下载的压缩包里面. 2.建立HttpHandler,在web.config里面加上: <configuration>lt;system.web>lt;httpHandlers>lt;add

Android实现基于滑动的SQLite数据分页加载技术(附demo源码下载)_Android

本文实例讲述了Android实现基于滑动的SQLite数据分页加载技术.分享给大家供大家参考,具体如下: main.xml如下: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:orderInCategory="100" android:showAs

Zend Framework实现留言本分页功能(附demo源码下载)_php实例

本文实例讲述了Zend Framework实现留言本分页功能的方法.分享给大家供大家参考,具体如下: 这里的分页功能运用了..Zend_Paginator这个组件来实现留言本分页...这里我也是参考PHPCHINA里一位PHPer写的这方面的教程 我实现的坏境以及项目的目录安排是在第三篇教程的基础上写的..如果有朋友不明白目录什么的安排..请用ZF1.6.0以上.请自己前面的文章里找一下这篇教程...我在这里就不多说什么了..谢谢.. 第一步:在我们的控制器里面,也就是indexControll

Android实现基于滑动的SQLite数据分页加载技术(附demo源码下载)

本文实例讲述了Android实现基于滑动的SQLite数据分页加载技术.分享给大家供大家参考,具体如下: main.xml如下: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:orderInCategory="100" android:showAs

Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)_php实例

本文实例讲述了Zend Framework生成验证码并实现验证码验证功能的方法.分享给大家供大家参考,具体如下: 今天讲述如何在留言本中实现验证码的功能..这样有利于我们网站减少一些垃圾留言或是广告留言..在这是我没有运用Zend Framework自带的Zend_Captcha组件..我只是找到ThinkPHP这个框架里的验证码类..就把它运用到了..我们留言本验证码的实现上...我在这里..是把它写成一个插件的形式...当然Zend Framework有很多方式运用其它代码..我现在只会运用

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)_javascript技巧

本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法.分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大