在平时网页中看电影的时候经常能够注意到就是在看电影的时候，底部有对电影的评论，点击评论分页的下一页没有重新刷新页面，这时候用到的则是Ajax异步刷新。这对于用户体验有所提高，因为要是电影看到一半点击评论的下一页，整个页面立马生效，这时候电影又重新加载，且不就打击用户么。下面用Ajax实现无刷新数据分页功能。此时借用的是Smarty+MysqL+Ajax实现
首先设计数据库中表的字段
create table category( id int primary key auto_increment,name varchar(20),content varchar(20),cid int);这时候要用到上一篇文章中的Ajax框架封装的函数。
(function(){
//获取一个dom元素
var $=function(id){
return document.getElementById(id);
};
//获取一个Ajax对象
$.init=function(){
try {return new XMLHttpRequest()} catch(e){}
try {return new ActiveXObject('Microsoft.XMLHTTP')} catch(e){}
alert('Error');
};
//用于发送Ajax的get请求
$.get=function(url,data,callback,type){
var xhr=$.init();
if(data!=null){
url=url+'?'+data;
}
xhr.open('get',url);
xhr.setRequestHeader("If-Modified-Since","0");
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
}
};
xhr.send(null);
};
//用于发送Ajax的post请求
$.post=function(url,type){
var xhr=$.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','application/x-form-urlencoded');
xhr.onreadystatechange=function(){
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
};
xhr.send(data);
};
window.$=$;
})();
编写页面显示的模板
<table width='800' cellspacing='1' cellpadding='4' bgcolor='#eeeeee'> <tr> <td>序号</td> <td>分类名</td> <td>描述</td> </tr> {foreach from=$data item='value'} <tr> <td>{counter}</td> <td>{$value['name']}</td> <td>{$value['content']}</td> </tr> {/foreach} <tr> <td colspan='3'> 共{$count}条数据 共{$pageCount}页 每页{$pageSize}条 当前第{$page}页 <a href='#' onclick="display(1)">首页</a> <a href='#' onclick="display({$pagePrev})">上一页</a> <a href='#' onclick="display({$pageNext})">下一页</a> <a href='#' onclick="display({$pageCount})">末页</a> </td> </tr> </table>
编写页面显示页
<!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"> <title>Ajax数据分页功能</title> <script type="text/javascript" src="public.js"></script> <script> window.onload=function(){ display(1); }; function display(page){ $.get('page.PHP','page='+page,function(msg){ $('content').innerHTML=msg; }); } </script> <style> #content{ padding-left:300px; padding-top:100px; } </style> </head> <body> <div id='content'> </div> </body> </html>
最后编写PHP操作数据库获取数据
<?PHP MysqL_connect('localhost','root','root'); MysqL_select_db('test'); MysqL_query('set names utf8'); $sql="select count(*) as num from category"; $result=MysqL_query($sql); $row=MysqL_fetch_assoc($result); $count=$row['num'];//获取总行数 $page=isset($_GET['page'])?$_GET['page']:1;//获取当前页码数 $pageSize=5;//每页显示多少条数据 $pageCount=ceil($count/$pageSize);//计算总页数 $pagePrev=$page-1;//上一页数 $pageNex=$page+1;//下一页数 if($pagePrev<1) $pagePrev=1;//判断当前页码是否越界 if($pageNex>$pageCount) $pageNex=$pageCount; if($page<1) $page=1; //判断当前页码是否越界 if($page>$pageCount) $page=$pageCount; $offset=($page-1)*$pageSize;//偏移量 $sql="select * from category order by id desc limit $offset,$pageSize"; $result=MysqL_query($sql); $num=MysqL_num_rows($result); $data=array(); for($i=0;$i<$num;$i++){ $data[]=MysqL_fetch_assoc($result); } MysqL_close(); include('Smarty/Smarty.class.PHP'); $smarty=new Smarty(); $smarty->assign('data',$data); $smarty->assign('count',$count); $smarty->assign('page',$page); $smarty->assign('pageCount',$pageCount); $smarty->assign('pageSize',$pageSize); $smarty->assign('pagePrev',$pagePrev); $smarty->assign('pageNext',$pageNex); $str=$smarty->fetch('page.tpl'); header('Content-Type:text/html;charset=utf8'); echo $str; ?>
原文链接：https://www.f2er.com/ajax/164516.html
