个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
25
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章PHP+Ajax实现无刷新分页实例详解(附demo源码下载)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本文实例讲述了PHP+Ajax实现无刷新分页的方法。分享给大家供大家参考，具体如下:
注：这里使用到的一些类库在前面文章都能找到源代码，因此为了缩短文章篇幅，都指明链接所在.
本文讲解内容为： Ajax 实现无刷新分页、实现原理、代码展示、代码下载.
这里需要说明一些知识:
1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态； 。
2、那么，Ajax 无刷新页面是运行在动态页面（.php）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面； 。
3、实现原理：通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示.
好了，下面进行代码讲解:
既然，是运行在静态页面上，我们首先先创建一个静态 HTML 页面，index.html 的代码清单如下.
index.html 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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 脚本如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?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实现无刷新分页实例详解(附demo源码下载)的文章就讲到这里了,如果你想了解更多关于PHP+Ajax实现无刷新分页实例详解(附demo源码下载)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
前言 在上一篇随笔中，我们探讨了如何使用 Netty 处理自定义协议中的粘包和拆包问题。Netty 提供了高度封装的 API，帮助开发者轻松应对这一挑战，因此很多人都对其解决方案非常熟悉。 但如果
前言 在上一篇随笔中，我们探讨了如何实现一套自定义通信协议，其中涉及到的粘包和拆包处理最初是完全自定义实现的，后来则改为了继承 ByteToMessageDecoder 来简化处理。 本篇将重点讨
ACO.Visualization项目 本项目演示蚁群算法求解旅行商问题的可视化过程，包括路径上的信息素浓度、蚁群的运动过程等。项目相关的代码：https://github.com/anycad/A
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 7 年前。
我需要用Sql数据库制作并包含的PHP票务系统源码用户客户端和管理员。我需要个人 CMS 的这个来源。谢谢你帮助我。 最佳答案 我在不同的情况下使用了 osticket。 这里: http://ost
我的场景:我想在日志文件中写入发生异常的部分代码(例如，发生异常的行前 5 行和行后 5 行 - 或者至少是该方法的所有代码)。 我的想法是用 C# 代码反编译 pdb 文件，并从该反编译文件中找到一
RocketMQ设定了延迟级别可以让消息延迟消费，延迟消息会使用 SCHEDULE_TOPIC_XXXX 这个主题，每个延迟等级对应一个消息队列，并且与普通消息一样，会保存每个消息队列的消费进度
先附上Hystrix源码图 在微服务架构中，根据业务来拆分成一个个的服务，服务与服务之间可以相互调用（RPC），在Spring Cloud可以用RestTemplate+Ribbon和
此篇博客学习的api如标题，分别是： current_url 获取当前页面的url； page_source 获取当前页面的源码； title 获取当前页面的titl
? 1 2
1、前言 作为一个数据库爱好者，自己动手写过简单的sql解析器以及存储引擎，但感觉还是不够过瘾。<<事务处理-概念与技术>>诚然讲的非常透彻，但只能提纲挈领，不能让你
gory"> 目录 运行时信号量机制 semaphore 前言 作用是什么 几个主要的方法 如何实现
自己写的一个评论系统源码分享给大家，包括有表情，还有评论机制。用户名是随机的 针对某一篇文章进行评论 function subcomment() {
一、概述 StringBuilder是一个可变的字符串序列，这个类被设计去兼容StringBuffer类的API，但不保证线程安全性，是StringBuffer单线程情况下的一个替代实现。在可能的情
一、概述 System是用的非常多的一个final类。它不能被实例化。System类提供了标准的输入输出和错误输出流；访问外部定义的属性和环境变量；加载文件和库的方法；以及高效的拷贝数组中一部分元素
在JDK中，String的使用频率和被研究的程度都非常高，所以接下来我只说一些比较重要的内容。 一、String类的概述 String类的声明如下： public final class Str
一、概述 Class的实例代表着正在运行的Java应用程序的类和接口。枚举是一种类，而直接是一种接口。每一个数组也属于一个类，这个类b被反射为具有相同元素类型和维数的所有数组共享的类对象。八大基本树
一、概述 Compiler这个类被用于支持Java到本地代码编译器和相关服务。在设计上，这个类啥也不做，他充当JIT编译器实现的占位符。 放JVM虚拟机首次启动时，他确定系统属性java.comp
一、概述 StringBuffer是一个线程安全的、可变的字符序列，跟String类似，但它能被修改。StringBuffer在多线程环境下可以很安全地被使用，因为它的方法都是通过synchroni
一、概述 Enum是所有Jav中枚举类的基类。详细的介绍在Java语言规范中有说明。 值得注意的是，java.util.EnumSet和java.util.EnumMap是Enum的两个高效实现，
我是一名优秀的程序员,十分优秀！