欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

php +ajax +sql 实现分页

程序员文章站 2022-09-02 22:57:48
现在我们来了解下讲的的分页,这里我们用ajax来实现分页效果 注意:这里的代码大部分和上一章相似,不同的地方我会用这样的来显示   1.首先新建个sql表,表内...

现在我们来了解下讲的的分页,这里我们用ajax来实现分页效果

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

 

php +ajax +sql  实现分页

1.首先新建个sql表,表内容如上所示:

 

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

 


header("Content-Type:text/html;charset=utf8");//申明编码格式
$conn=mysql_connect("localhost","root","aaaaaa") or die("数据库连接错误".mysql_errno());//连接sql
mysql_select_db("phptest",$conn);
mysql_query('SET NAMES UTF8') or die('字符集设置错误'.mysql_error());//设置输入的字符集编码
?>
3.php服务端提供给前端ajax数据接口,新建文件phptoAJAX。php


require_once("conn.php");//导入公用文件

$page=isset($_POST["index"])?$_POST["index"]:1;//限制行数,$_POST["index"]为前端ajax提交的数据
$query=mysql_query("SElECT * FROM txt LIMIT $page,5") or die("错误提示:".mysql_error());//动态修改获取行数的基数$page
$jsonArray=array();//新建数据用于接收数据库每行对应的数据组while($rows=mysql_fetch_array($query)){
  //处理数据库里面的自动对应的内容
    $rows['content']=mb_substr(strip_tags(htmlspecialchars_decode($rows['content'])),0,100,"utf-8");
  //把数据库的内容添加到新建数组中  
   array_push($jsonArray,$rows);//注意这里是$rows

}
echo json_encode($jsonArray);//转换成json传递给前端

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

php +ajax +sql  实现分页


html> <html> <head lang="en"> <meta charset="UTF-8"> <title>title>

<style> //给分页节点添加点样式 *{margin:0;} ul{height:400px;width:800px;margin:0 auto;} .page{width:800px;height:30px;margin:0 auto;} li{font-size: 14px;} span{padding:0 2px;cursor:pointer;} .inline{background:#009999;color:#fff;} .inline:hover{color:#006600;text-decoration: underline;} style>
<script type="text/javascript" src="jquery-1.8.3.min.js">script>head><body>

ul><script type="text/javascript">
    $(function(){     
   $.ajax({       
        type: "post",//传递方法    
        url: "phpToAJAX.php",//数据接口 
        dataType: "json",//接收格式    
        success: function(msg)//如果接收成功执行以下 
        {        
          var li="";      
          for(var i =0;ilength-1;i++)//这里是限定10个  
              { 
                  li+="
  • "+msg[i]['title']+"

    "+msg[i]['content']+"...详细

  • "; } $("#list").html(li);
            },  
              error:function()//如果接收不成功执行以下
              {    
                    console.log("链接错误")
              }
            });
        });
       
    
    
     
    $("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) { var li=""; for(var i =0;ilength;i++)//这里是限定10个  { li+="
    • "+msg[i]['title']+"

      上传时间:"+msg[i]['createtime']+"

      "+msg[i]['content']+"...详细

    • "; //alert(msg.length) } $("#list").html(li); }, error:function(){ console.log("链接错误") } }); })script>body>html>
      5.点击上一步图中所示的“详细”链接,可查看对应的文章内容,新建phpArtcle.php文件
      
      
      
      require_once("conn.php");
      $id=$_GET['art'];//接收前端上传的数据
      
      
      //查询数据库对应的内容
      $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'])."

      ";}-------------------完毕-----------------------