首页 > 开发 > PHP > 正文

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

2024-05-04 22:31:17
字体:
来源:转载
供稿:网友

本文实例讲述了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 函数接口;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表