php +ajax +sql 实现分页

上一章：php +ajax +sql 实现数据交互

上一章，讲解了php +ajax +sql实现数据异步加载，现在我们来了解下讲的的分页，这里我们用ajax来实现分页效果

注意：这里的代码大部分和上一章相似，不同的地方我会用这样的来显示

1.首先新建个sql表，表内容如上所示：

2.新建个公用文件conn.php来链接数据库:

<strong><?php </strong> header(<strong>"Content-Type:text/html;charset=utf8"</strong>);//申明编码格式 $conn=mysql_connect(<strong>"localhost"</strong>,<strong>"root"</strong>,<strong>"aaaaaa"</strong>) <strong>or die</strong>(<strong>"</strong><strong>数据库连接错误</strong><strong>"</strong>.mysql_errno());//连接sql mysql_select_db(<strong>"phptest"</strong>,$conn);mysql_query(<strong>'SET NAMES UTF8'</strong>) <strong>or die</strong>(<strong>'</strong><strong>字符集设置错误</strong><strong>'</strong>.mysql_error());//设置输入的字符集编码 <strong>?></strong></strong>

<strong>3.php服务端提供给前端ajax数据接口，新建文件phptoAJAX。php</strong>

<strong></strong><pre class="n"><strong><?php</strong> <strong>require_once</strong>(<strong>"conn.php"</strong>);//导入公用文件

<pre class="n">$page=<strong>isset</strong>($_POST[<strong>"index"</strong>])?$_POST[<strong>"index"</strong>]:1;//限制行数，$_POST[<strong>"index"]为前端ajax提交的数据</strong>

$query=mysql_query(<strong>"SElECT * FROM txt LIMIT </strong>$page<strong>,5"</strong>) <strong>or die</strong>(<strong>"</strong><strong>错误提示：</strong><strong>"</strong>.mysql_error());//动态修改获取行数的基数$page

$jsonArray=array();//新建数据用于接收数据库每行对应的数据组while($rows=mysql_fetch_array($query)){

 //处理数据库里面的自动对应的内容  $rows[<strong>'content'</strong>]=mb_substr(strip_tags(htmlspecialchars_decode($rows[<strong>'content'</strong>])),0,100,<strong>"utf-8"</strong>);  //把数据库的内容添加到新建数组中  

 array_push($jsonArray,$rows);//注意这里是$rows  } <strong>echo </strong>json_encode($jsonArray);//转换成json传递给前端

4.新建phpToAJAX.HTML前端接收数据，这里我用jquery封装好的ajax方法，执行后的页面如下图所示：

<pre class="n"><!DOCTYPE <strong>html</strong>><<strong>html</strong>><<strong>head </strong><strong>lang=</strong><strong>"en"</strong>>    <<strong>meta </strong><strong>charset=</strong><strong>"UTF-8"</strong>>    <<strong>title</strong>></<strong>title</strong>>

<pre class="n"><<strong>style</strong>> //给分页节点添加点样式    <strong>*</strong>{<strong>margin</strong>:0;}    <strong>ul</strong>{<strong>height</strong>:400<strong>px</strong>;<strong>width</strong>:800<strong>px</strong>;<strong>margin</strong>:0 <strong>auto</strong>;}    .<strong>page</strong>{<strong>width</strong>:800<strong>px</strong>;<strong>height</strong>:30<strong>px</strong>;<strong>margin</strong>:0 <strong>auto</strong>;}    <strong>li</strong>{<strong>font-size</strong>: 14<strong>px</strong>;}    <strong>span</strong>{<strong>padding</strong>:0 2<strong>px</strong>;<strong>cursor</strong>:<strong>pointer</strong>;}    .<strong>inline</strong>{<strong>background</strong>:<strong>#009999</strong>;<strong>color</strong>:<strong>#fff</strong>;}    .<strong>inline</strong>:<strong>hover</strong>{<strong>color</strong>:<strong>#006600</strong>;<strong>text-decoration</strong>: <strong>underline</strong>;}</<strong>style</strong>>

script type="text/javascript" src="jquery-1.8.3.min.js">script>head>body>

<pre class="n"><strong><?php //生成分页 include("conn.php"); $pagesize=1; session_start(); $p=$_POST["index"]?$_POST["index"]:1; $_SESSION["p"]=$p; $pat=$_SESSION["p"]; $query=mysql_query("SELECT count(*) FROM txt") or die("数据链接错误：".mysql_error());//获取表的所有行，用来显示行的总是 $count_array = mysql_fetch_array($query); </strong><strong></strong><pre class="n">//获取表的函数

$pagenum=ceil($count_array['count(*)']/10);

//获取表的函数

for($i=1;$i

//生成制作分页的DOM

{ echo ' '.$i.'';}?>ul id="list">

  <!--数据将在这里显示-->

ul>script type="text/javascript">

    $(<strong>function</strong>(){     

   $.ajax({       

        <strong>type</strong>: <strong>"post"</strong>,//传递方法    

        <strong>url</strong>: <strong>"phpToAJAX.php"</strong>,//数据接口 

        <strong>dataType</strong>: <strong>"json"</strong>,//接收格式    

        success: <strong>function</strong>(msg)//如果接收成功执行以下 

        {        

          <strong>var </strong>li=<strong>""</strong>;      

          <strong>for</strong>(<strong>var </strong>i =0;i<msg.<strong>length</strong>-1;i++)//这里是限定10个  

 { 

                  li+=<strong>"<li><h2>"</strong>+msg[i][<strong>'title'</strong>]+<strong>"</h2><p>"</strong>+msg[i][<strong>'content'</strong>]+<strong>"...<a href='phpArtcle.php?art="</strong>+msg[i][<strong>'id'</strong>]+<strong>"' target='_blank'></strong><strong>详细</strong><strong></a></p></li>"</strong>;                    }                $(<strong>"#list"</strong>).html(li);        

        },  

          error:<strong>function</strong>()//如果接收不成功执行以下

          {                    console.log(<strong>"</strong><strong>链接错误</strong><strong>"</strong>)          }        });    });   

 
$("span").click(function()  //点击分页节点DOM的时候 提交ajax 来重新获取数据{    var index=$("span").index(this);    $("span").eq(index).addClass("inline").siblings().removeClass("inline");    $.ajax({        type: "post",        url: "phpToAJAX.php",        dataType: "json",        data:{"index":index},        success: function(msg)        {            <strong>var </strong>li=<strong>""</strong>;            for(var i =0;ilength;i++)//这里是限定10个  {                li+="
"+msg[i]['title']+"
上传时间："+msg[i]['createtime']+"
"+msg[i]['content']+"...]+"' target='_blank'>详细
";                //alert(msg.length) }            $("#list").html(li);        },        error:function(){            console.log("链接错误")        }    });})
script>body>html>
5.点击上一步图中所示的“详细”链接，可查看对应的文章内容，新建phpArtcle.php文件
<strong><?php</strong> <strong>require_once</strong>(<strong>"conn.php"</strong>); $id=$_GET[<strong>'art'</strong>];//接收前端上传的数据
<pre class="n">//查询数据库对应的内容
$query=mysql_query("SELECT * FROM txt WHERE  id='$id'") or die("文章错误：".mysql_error());
//遍历数组，显示内容
if($rows=mysql_fetch_array($query)){    echo "
".$rows['title']."";    echo "
".htmlspecialchars_decode($rows['content'])."
";}              
              -------------------    完毕    -----------------------