ajax翻页效果模仿yii框架自己写的

复制代码 代码如下:

  <!DOCTYPE html>

  <html>

  <head>

  <title>ajax分页</title>

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

  <script>

  function loadXMLDoc($url)

  {

  var xmlhttp;

  if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

  else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

  {

  var $data = $('<div>' + xmlhttp.responseText + '</div>');

  // alert($("#updateId", $data).html());

  // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  $("#updateId").replaceWith($("#updateId", $data));

  }

  }

  xmlhttp.open("GET",$url,true);

  xmlhttp.send();

  }

  </script>

  </head>

  <body>

  <table id="updateId">

  <tr><td>id</td><td>标题</td><td>时间</td></tr>

  <?php if(isset($_GET['p'])&&$_GET['p'] == 2): ?>

  <tr><td>2</td><td>222</td><td>222</td></tr>

  <tr><td>2</td><td>222</td><td>222</td></tr>

  <?php else: ?>

  <tr><td>1</td><td>111</td><td>111</td></tr>

  <tr><td>1</td><td>111</td><td>111</td></tr>

  <?php endif; ?>

  </table>

  <div><a href="javascript:;" onclick="loadXMLDoc('?p=1')">1</a><a href="javascript:;" onclick="loadXMLDoc('?p=2')">2</a></div>

  </body>

  </html>