ajax php 分页 感触

前几天试着做了一个分页，从网上看到了一种许多人都在转载的例子，下面贴出来让大家看看

1 <? php
2   header ( ' Content-type: text/html ;charset = utf-8 ' );
3 ?>
4 < html >
5 < head >
6 < title > ajax分页演示 </ title >
7 < style type = ' text/css ' >
8 /* CSS Document */
9 # result ul li {
10 height : 20px;
11 width : auto;
12 display : block;
13 color : # 999;
14 border : 1px solid # 999;
15 float : left;
16 list - style : none;
17 font - size : 12px;
18 margin - left : 5px;
19 line - height : 20px;
20 vertical - align : middle;
21 text - align : center;
22 }
23
24 # result ul li a:link {
25 width : 50px;
26 height : 20px;
27 display : block;
28 line - height : 20px;
29 background : # 09C;
30 border : 1px solid # fff;
31 color : # fff;
32 text - decoration : none;
33 }
34
35 # result ul li a:hover {
36 width : 50px;
37 height : 20px;
38 display : block;
39 line - height : 20px;
40 background : # 09C;
41 border : 1px solid # fff;
42 color : # F60;
43 text - decoration : none;
44 }
45 </ style >
46 < script type = " text/javascript " src = " ajax_jquery.js " >
47 </ script >
48 < script type = " text/javascript " src = " ../lib/jquery-1.4.2.min.js " ></ script >
49 </ head >
50 < body >
51 < div id = " result " >
52 <? php
53 $page = isset ( $_GET [ ' page ' ]) ? intval ( $_GET [ ' page ' ]) : 1 ;
54 $num = 5 ; // 每页显示10条数据
55 $db = mysql_connect ( " localhost " , " root " , " root " );
56 mysql_select_db ( " db_s8s " );
57 /* *
58 *
59 首先咱们要获取数据库中到底有多少数据，才能判断具体要分多少页，具体的公式就是
60 总数据库除以每页显示的条数，有余进一。
61 也就是说10/3=3.3333=4 有余数就要进一。 */
62 $result = mysql_query ( " SELECT * FROM S8S_SOURCE_COMMENT " );
63 $total = mysql_num_rows ( $result );
64
65 $url = ' test.php ' ;
66
67 // 页码计算
68 $pageNum = ceil ( $total / $num ); // ceil -- 进一法取整 获得总页数，也是最后一页的页数
69 $page = min ( $pageNum , $page ); // 首页
70 $prePage = $page - 1 ; //
71 $nextPage = ( $page == $pageNum ? 0 : $page + 1 );
72 $offset = ( $page - 1 ) * $num ; // 获取limit的第一个参数的值，假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。
73
74 //开始分页导航代码
75 $pageNav = " 显示第<B> " . ( $total ? $offset + 1 : 0 ) . " </B>-<B> " . min ( $offset + $num , $total ) . " </B> 条记录，共 " . $total . " 条记录 " ;
76 // 如果就有一页，跳出函数
77 if ( $pageNum <= 1 ) {
78 return false ; }
79
80 $pageNav .= " <a href=javascript:dopage('result',' $url ?page=1');>首页</a> " ;
81 if ( $prePage ) {
82 $pageNav .= " <a href=javascript:dopage('result',' $url ?page= $prePage ');>前页</a> " ;
83 } else {
84 $pageNav .= " 前页 " ;
85 }
86 if ( $nextPage ) {
87 $pageNav .= " <a href=javascript:dopage('result',' $url ?page= $nextPage ');>后页</a> " ;
88 } else {
89 $pageNav .= " 后页 " ;
90 }
91 $pageNav .= " <a href=javascript:dopage('result',' $url ?page= $pageNum ');>尾页</a> " ;
92 $pageNav .= " </select>页,共 $pageNum 页 " ;
93
94 if ( $page > $pageNum ) {
95 echo " Error : Can not Find The Page " . $page ;
96 Exit ;
97 }
98 // 获取相应页数所需要显示的数据
99 $info = mysql_query ( " SELECT * FROM S8S_SOURCE_COMMENT LIMIT $offset , $num " );
100 while ( $it = mysql_fetch_array ( $info )) {
101 echo $it [ ' scid ' ];
102 // echo json_encode(array('scid'=>$it['scid']));
103 echo " </br> " ;
104 }
105 echo " </br> " ;
106 echo $pageNav ; // 输出分页导航
107 ?>
108 </ div >
109 </ body >
110 </ html >

下面是对应的js部分

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(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;
}

对于此，可以利用简单的jQuery搞定，当然这并不是我想说的。。。

/* *
* @author sky
*/
function dopage(obj,url){
$.ajax({
type: " GET " ,
url:url,
success: function (data){
$( ' # ' + obj).html(data);
// $('#'+obj).html("正在加载数据.....");
}
});
}　　　　

如果大家仔细想想就可以发现，当然这也是我的同学告诉我的，呵呵，其实这个例子并不是真正的异步刷新，从firebug里面大家可以看到
每一次的请求所对应的响应的内容是html内容，然后将响应的全部数据更新到div里面，其实还和刷新页面的效果是一个样子的。。。

学习中的。。。。。。鸟。。。。。。

转载于:https://www.cnblogs.com/ifbs/archive/2011/04/22/ifbs.html