php +ajax +sql 实现分页-php教程-PHP中文网

php +ajax +sql 实现分页

WBOY

发布： 2016-06-23 13:36:22

原创

934 人浏览过

上一章：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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="n">//获取表的函数

登录后复制

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

$("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("链接错误")        }    });})

登录后复制

php +ajax +sql 实现分页

"+msg[i]['title']+"

".$rows['title']."