直接贴图:
ajax.js
function get(url1,value,methodName){
/*
ajax无刷新的评论技术
1、发布的评论要无刷新的显示到下边区域
2、通过ajax把内容存到服务器上
3、获取服务器的数据,显示到评论区
*/
/*ajax基本的使用步骤
1、初始化ajax引擎
2、封装url(设定要请求的路径)
3、打开ajax引擎(同步方式、异步方式)
4、将要请求的信息发送到服务器进行处理
5、监听服务器放回给ajax引擎的处理状态
6、判断是否交互完毕,如果交互完毕则取出返回的数据
*/
//使用ajax引擎
var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器,并且ie6一下还有问题。
var url =url1+"?"+value+"&r="+Math.random();
//alert(url);
//打开引擎
xhr.open("get",url,true); //readyState=1
//发送请求
xhr.send(null); //readyState=2
//监听readyState值的改变,每次改变都会执行下面的函数
xhr.onreadystatechange=function (){
//如果等于4,表名交互完毕,我们可以取出服务器返回的内容
if(xhr.readyState==4){
methodName(xhr);
}
}
}
function $$(id){
return document.getElementById(id);
}
dbConn.php
<?php
//简历数据库的链接
mysql_connect("localhost","root","liuhaichuang");
//选择数据库
mysql_select_db("area");
//设置字符集
mysql_query("set names utf8");
$F_PAGESIZE=15;
?>
paging.php
<?php
include("dbConn.php");
/*
几个关键的变量:当前页 总页数 每页大小
*/
//定义当前页
if(isset($_GET['np'])){
$nowPage=$_GET['np'];
}else{
$nowPage=1;
}
//查询数据库,得到总的记录数
$rs=mysql_query("select count(*) from area");
$rowNum=mysql_result($rs,0);
//总页数=上取整(总记录数/每页的大小)
$Pages=ceil($rowNum/$F_PAGESIZE);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax+js+dom+json+php+mysql实现仿百度、google的超强分页效果</title>
<style>
#tab{
margin:auto auto;
border-collapse:collapse;
}
#content{
height:440px;
width:750px;
background-color:#9FC;
border:1px dashed;
}
#pageNum{
height:20px;
width:750px;
background-color:#9FC;
border:1px dashed;
}
td{
width:250px;
}
.one {
background-color: #F9C;
}
.two {
background-color: #FCC;
}
</style>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
<script language="javascript" type="text/javascript">
//--------------------显示页码部分开始-----------
/*
做几件事情
1、定义当前页 解决在javascript中使用php中定义的变量
2、定义开始页
3、定义最终页(结束页)
4、定义总页数
*/
//1、定义当前页 解决在javascript中使用php中定义的变量
var nowPage=1;
//2、定义开始页
var startPage=1;
//3、定义结束页
var endPage=<?php echo $Pages; ?>;
//4、定义总页数
var Pages=<?php echo $Pages; ?>;
function initPages(){
//当总页数大于11的时候,设定起始页和结束页
if(Pages>11){
//要设定起始页
if(nowPage-10>0){
//如果当前页-10>0则设置起始页=当前页-10,否则不设置,startPage=1
startPage=nowPage-10;
}
//设定结束页
if(nowPage+9<Pages){
//如果当前页+9>总页数,则设定结束页为 当前页+9,否则设定结束页=总页数
endPage=nowPage+9;
}else{
endPage=Pages;
}
}
var pageNumStr="";
//判断什么时候显示上一页
if(nowPage!=1){
pageNumStr+="<a href='javascript:getPageDatas("+(nowPage-1)+")'>上一页</a>";
}
//for循环读出页码
for(var i=startPage;i<=endPage;i++){
//判断是否是当前页,如果是当前页,让该页码加粗或变红
if(nowPage==i){
//如果是当前页,设置加粗、红色显示
pageNumStr+=" <font color='red'><b>"+i+"</b></font>";
}else{
pageNumStr+=" <a href='javascript:getPageDatas("+i+")'>"+i+"</a>";
}
}
//判断什么时候显示下一页
if(nowPage<Pages){
pageNumStr+="<a href='javascript:getPageDatas("+(nowPage+1)+")'>下一页</a>";
}
//将拼装的字符串连接到
$$("pageNum").innerHTML=pageNumStr;
}
//--------------------显示页码部分结束-----------
//--------------------显示页面正文开始-----------
function getPageDatas(np){
startPage=1;
var url="paging-server.php";
var params="np="+np;
//进行ajax请求
get(url,params,processPageDatas);
}
function processPageDatas(xhr){
//将json格式的字符串转化为对象
var obj=eval("("+xhr.responseText+")");
// alert(obj);
//alert(xhr.responseText);
//将当前页重新赋值,注意服务器返回的是字符串
nowPage=parseInt(obj.np);
initPages();
//获取查询结果
var pageDatas=obj.pageDatas;
//遍历内容
var pageStr="<table>";
pageStr+="<tr><th>编号</th><th>名称</th><th>编码</th><th>拼音</th><th>拼音缩写</th></tr>"
for(var i=0;i<pageDatas.length;i++){
pageStr+="<tr><td>"+pageDatas[i].id+"</td><td>"+pageDatas[i].name+"</td><td>"+pageDatas[i].code+"</td><td>"+pageDatas[i].p+"</td><td>"+pageDatas[i].l+"</td></tr>";
}
pageStr+="</table>";
//将表格显示到div id="content"中
$$("content").innerHTML=pageStr;
geHang();
}
//--------------------显示页面正文结束-----------
//--------------------表格的隔行变色效果开始-----------
function geHang(){
//获取所有的tr
var trlist = document.getElementsByTagName("tr");
for(var i = 1; i < trlist.length; i++) {
//进行判断
if(i % 2 == 0) {
trlist[i].className = "two";
} else {
trlist[i].className = "one";
}
var oldcolor;
//实现当鼠标移动到该行,该行改变颜色
trlist[i].onmouseover = function() {
oldcolor = this.className;
this.className = "over";
}
trlist[i].onmouseout = function() {
//当鼠标离开,自动还原原来的颜色
this.className = oldcolor;
}
}
}
//--------------------表格的隔行变色效果结束-----------
</script>
</head>
<body οnlοad="getPageDatas(1)">
<table id="tab">
<caption>Ajax+js+dom+json+php+mysql实现仿百度、google的超强分页效果</caption>
<tr>
<td>
<div id="content"></div>
</td>
</tr>
<tr>
<td>
<div id="pageNum"></div>
</td>
</tr>
</table>
</body>
</html>
paging-server.php
<?php
header("Content-Type:text/html;charset=utf-8");
include("dbConn.php");
//接受客户端传递来的数据
$np = $_GET['np'];
//定义sql语句
$sql="select id,name,code,p,l from area limit ".($np-1)*$F_PAGESIZE.",".$F_PAGESIZE;
//执行查询
$rs = mysql_query($sql);
$arr2=array();
//遍历读取每行数据
while($rows=mysql_fetch_assoc($rs)){
$arr[]=$rows;
}
$arr2=array("np"=>$np,"pageDatas"=>$arr);
//将数组转化车工json对象(格式的字符串)
echo json_encode($arr2);
?>
源码下载:源码+数据库