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;

  ?>