ajax实现无刷新分页(php)

162 阅读 0 评论 107 点赞

我是靠谱客的博主俭朴火车，最近开发中收集的这篇文章主要介绍ajax实现无刷新分页(php)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>投票结果</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
function GetXmlHttpObject() 
{ 
var xmlHttp=null; 
try 
{ 
// Firefox, Opera 8.0+, Safari 
xmlHttp=new XMLHttpRequest(); 
} 
catch (e) 
{ 
// Internet Explorer 
try 
{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e) 
{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
return xmlHttp; 
} 
function checkajax(){ 
xmlHttp=GetXmlHttpObject() 
if (xmlHttp==null) 
{ 
alert ("您的浏览器不支持AJAX！"); 
return ; 
}else 
{ 
return xmlHttp; 
} 
} 
function preshow(){ 
ajaxobj = checkajax(); 
var url = "page.php?page=1"; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint1(str) 
{ 
ajaxobj = checkajax(); 
document.getElementById("msg").innerHTML="正在读取数据……"; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint2(str) 
{ 
ajaxobj=checkajax(); 
document.getElementById("msg").innerHTML="正在读取数据……"; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint3(str) 
{ 
ajaxobj=checkajax(); 
document.getElementById("msg").innerHTML="正在读取数据……"; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint4(str) 
{document.getElementById("msg").style.display="none"; 
ajaxobj=checkajax(); 
document.getElementById("msg").innerHTML="正在读取数据……"; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4) 
{ 
document.getElementById("message").innerHTML=xmlHttp.responseText; 
} 
} 
</script> 
</head> 
<body onload="preshow()"> 
<div id="wrapper"> 
<h4>用户留言如下：</h4> 
<div id="message"> 
</div> 
</div> 
</body> 
</html> 

复制代码代码如下:

 
<?php 
$link = mysql_connect('localhost', 'root', '') or die(mysql_error()); 
mysql_select_db('vote', $link) or die(mysql_error()); 
mysql_query("set names utf8"); 
$num = 3; 
$url = "page.php"; 
$con = "<ul id='msg'>"; 
$page = (isset($_REQUEST['page'])) ? $_REQUEST['page'] : 1; 
$offset = ($page - 1) * $num; 
$result = mysql_query("SELECT COUNT(*) FROM client"); 
$total = mysql_fetch_row($result); 
$total = $total[0]; 
$pagenum = ceil($total / $num); 
$page = min($pagenum, $page); //获得首页 
$prepg = $page - 1; //上一页 
if ($prepg <= 1) 
$prepg = 1; 
$nextpg = ($page == $pagenum ? 1 : $page + 1); //下一页 
//如果只有一页则跳出函数： 
if ($pagenum <= 1) 
return false; 
$sql = "SELECT `name`,`content` FROM `client` LIMIT " . $offset . "," . $num; 
$res = mysql_query($sql); 
while ($content = mysql_fetch_row($res)) { 
$con .= "<li><span>$content[0]:</span>  $content[1]</li>"; 
} 
$con .= "</ul>"; 
$con .= <<< PAGE 
<p id="page"><a href="#" id="first" onclick="showHint1('$url?page=1')">首页</a>|<a href="#" id="pre" onclick="showHint2('$url?page=$prepg')">上一页</a>|<a href="#" id="next" onclick="showHint3('$url?page=$nextpg')">下一页</a>|<a href="#" id="last" onclick="showHint4('$url?page=$pagenum')">尾页</a></p> 
PAGE; 
echo $con; 
?> 