php+ajax实现无刷新数据分页的办法


Posted in PHP onNovember 02, 2015

本文实例讲述了php+ajax实现无刷新分页的方法。分享给大家供大家参考。具体实现方法如下:

index.php 文件,代码如下:

<?php 
header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 
?> 
<html> 
<head> 
<title>ajax分页演示</title> 
<script language="javascript" src="ajaxpg.js"></script> 
<link rel="stylesheet" type="text/css" href="page.css"> 
</head> 
<body> 
<div id="result"> 
<?php 
$page=isset($_GET['page'])?intval($_GET['page']):1; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。 
$num=3; //每页显示10条数据 
 
$db=mysql_connect("localhost","root","123456"); //创建数据库连接 
mysql_select_db("demo",$db) or die("数据库链接错误"); //选择要操作的数据库 
mysql_query("set names gbk"); 
/* 
首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是 
总数据库除以每页显示的条数,有余进一。 
也就是说10/3=3.3333=4 有余数就要进一。 
*/ 
 
$result=mysql_query("select * from brand"); 
$total=mysql_num_rows($result); //查询所有的数据 
 
$url='test.php';//设置ajax提交页面地址的URL,这里设置成test.php通过ajax把参数传递给test.php再把处理过的内容赋值到本页的div id=result。 
//页码计算 
$pagenum=ceil($total/$num);//获得总页数,也是最后一页 
$page=min($pagenum,$page);//获得首页 
$prepg=$page-1;//上一页 
$nextpg=($page==$pagenum ? 0 : $page+1);//下一页 
$offset=($page-1)*$num; //获取limit的第一个参数的值,假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。 
$pagenav="<ul>"; 
 
//开始分页导航条代码: 
$pagenav.="<li>显示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 条记录</li><li>共 $total 条记录 </li>"; 
 
//如果只有一页则跳出函数: 
if($pagenum<=1) return false; 
 
$pagenav.="<li> <a href=javascript:dopage('result','$url?page=1');>首页</a></li> "; 
if($prepg) $pagenav.="<li> <a href=javascript:dopage('result','$url?page=$prepg');>前页</a></li> "; else $pagenav.=" <li>前页</li> "; 
if($nextpg) $pagenav.="<li><a href=javascript:dopage('result','$url?page=$nextpg');>后页</a> </li>"; else $pagenav.=" <li>后页</li> "; 
$pagenav.="<li> <a href=javascript:dopage('result','$url?page=$pagenum');>尾页</a></li> "; 
$pagenav.="<li>第 $page 页</li><li>共 $pagenum 页</li></ul>"; 
 
//假如传入的页数参数大于总页数,则显示错误信息 
If($page>$pagenum){ 
 Echo "Error : Can Not Found The page ".$page; 
 Exit; //开源软件:phpfensi.com 
} 
?></div><div id="results"> 
<?php 
 echo $pagenav;//输出分页导航 
?> 
</div> 
</body> 
</html>

css代码:

/* CSS Document */ 
/* CSS Document */ 
#result ul li{ 
height:20px; 
width:auto; 
display:block; 
color:#999; 
border:1px solid #999; 
float:left; 
list-style:none; 
font-size:12px; 
margin-left:5px; 
line-height:20px; 
vertical-align:middle; 
text-align:center; 
} 
#result ul li a:link{ 
width:50px; 
height:20px; 
display:block; 
line-height:20px; 
background:#09C; 
border:1px solid #fff; 
color:#fff; 
text-decoration:none; 
} 
#result ul li a:hover{ 
width:50px; 
height:20px; 
display:block; 
line-height:20px; 
background:#09C; 
border:1px solid #fff; 
color:#F60; 
text-decoration:none; 
}

ajaxpg.js文件,如下:

// JavaScript Document 
var http_request=false; 
 function send_request(url){//初始化,指定处理函数,发送请求的函数 
 http_request=false; 
//开始初始化XMLHttpRequest对象 
if(window.XMLHttpRequest){//Mozilla浏览器 
http_request=new XMLHttpRequest(); 
if(http_request.overrideMimeType){//设置MIME类别 
 http_request.overrideMimeType("text/xml"); 
} 
} 
else if(window.ActiveXObject){//IE浏览器 
try{ 
 http_request=new ActiveXObject("Msxml2.XMLHttp"); 
}catch(e){ 
 try{ 
 http_request=new ActiveXobject("Microsoft.XMLHttp"); 
 }catch(e){} 
} 
 } 
if(!http_request){//异常,创建对象实例失败 
window.alert("创建XMLHttp对象失败!"); 
return false; 
} 
http_request.onreadystatechange=processrequest; 
//确定发送请求方式,URL,及是否同步执行下段代码 
 http_request.open("GET",url,true); 
http_request.send(null); 
 } 
 //处理返回信息的函数 
 function processrequest(){ 
if(http_request.readyState==4){//判断对象状态 
 if(http_request.status==200){//信息已成功返回,开始处理信息 
 document.getElementById("results").style.display="none"; 
 document.getElementById(reobj).innerHTML=http_request.responseText; 
} 
else{//页面不正常 
 alert("您所请求的页面不正常!"); 
} 
} 
 } 
 function dopage(obj,url){ 
document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在读取数据...</font>"; 
send_request(url); 
reobj=obj; 
}

数据库文件,如下:

-- phpMyAdmin SQL Dump 
-- version 2.8.1 
-- 主机: localhost 
-- 服务器版本: 5.0.22 
-- PHP 版本: 5.2.12 
-- 
-- 数据库: `demo` 
-- 
-- -------------------------------------------------------- 
-- 
-- 表的结构 `brand` 
-- 
CREATE TABLE `brand` ( 
 `id` int(7) NOT NULL auto_increment, 
 `sp_brand` varchar(255) default NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ; 
-- 
-- 导出表中的数据 `brand` 
-- 
INSERT INTO `brand` (`id`, `sp_brand`) VALUES (1, 'hello world'), 
(2, '你好'), 
(3, '恩'), 
(4, 'fdsafdsafdsa'), 
(5, 'fdsafdafdsafdas'), 
(6, 'fdsafdsa'), 
(7, 'fdsafdsafdas'), 
(8, '恩'), 
(9, '恩'), 
(10, '恩'), 
(11, '恩11'), 
(12, '恩'), 
(13, '恩'), 
(14, '恩'), 
(15, '恩'), 
(16, '恩'), 
(17, '恩'), 
(18, '恩18');

下面介绍这些文件的功能

ajaxpg.js:ajax无刷新核心文件,一般不要去作修改.

index.php:实现ajax无刷新的文件了,这里调用了ajaxpg.js文件,配置了mysql用户密码,要和自己本地的一致,以及显示分页的效果.

page.css:这是分页的CSS样式文件,用来美化的,就不多介绍了.

brand.sql:这是MYSQL数据库的文件了,进行导入到MYSQL数据库中,同样,如果不会导入,可以参考PHPfensi.com中如何导入.sql文章即可。

例子非常的简单大家只要按流程来操作就ok啦,希望这篇文章能帮助大家真正的实现php+ajax无刷新分页。

PHP 相关文章推荐
基于php-fpm 参数的深入理解
Jun 03 PHP
php异常处理使用示例
Feb 25 PHP
php基于str_pad实现卡号不足位数自动补0的方法
Nov 12 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
Nov 19 PHP
Codeigniter框架实现获取分页数据和总条数的方法
Dec 05 PHP
PHP获取当前完整URL地址的函数
Dec 21 PHP
10款PHP开源商城系统汇总介绍
Jul 23 PHP
php生成验证码函数
Oct 20 PHP
php多线程并发实现方法
Sep 30 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
May 12 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
May 08 PHP
PHP常见的序列化与反序列化操作实例分析
Oct 28 PHP
PHP中Http协议post请求参数
Nov 02 #PHP
浅谈PHP中foreach/in_array的使用
Nov 02 #PHP
php防止用户重复提交表单
Nov 02 #PHP
windows8.1下Apache+Php+MySQL配置步骤
Oct 30 #PHP
php验证邮箱和ip地址最简单方法汇总
Oct 30 #PHP
php三种实现多线程类似的方法
Oct 30 #PHP
php搜索文件程序分享
Oct 30 #PHP
You might like
php微信支付接口开发程序
2016/08/02 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
javaScript语法总结
2016/11/25 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
网络安全方面的面试题
2015/11/04 面试题
this关键字的含义
2015/04/08 面试题
爱护花草树木的标语
2014/06/11 职场文书
会议简讯范文
2015/07/20 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python制作动态字符画的源码
2021/08/04 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python