加载更多 功能的实现

发送ajax请求，获取数据。判断code状态。通过模板引擎渲染的页面。根据服务端数据的总条数判断是否 显示加载更多 按钮。

代码

<script src="./static/assets/vendors/jquery/jquery.js"></script>
<script src="./static/assets/vendors/art-template/template-web.js"></script>  //引入模板引擎
 <script type="text/template" id ="morePost"> //模板
  {{each data}}
    <div class="entry">
      <div class="head">
        <a href="detail.php?postid={{$value['id']}}">{{$value['title']}}</a>
      </div>
      <div class="main">
        <p class="info">{{$value["nickname"]}} 发表于 {{$value["created"]}}</p>
        <p class="brief">{{$value["content"]}}</p>
        <p class="extra">
          <span class="reading">阅读({{$value["views"]}})</span>
          <span class="comment">评论({{$value["comNum"]}})</span>
          <a href="javascript:;" class="like">
            <i class="fa fa-thumbs-up"></i>
            <span>赞({{$value["likes"]}})</span>
          </a>
          <a href="javascript:;" class="tags">
            分类：<span>{{$value["name"]}}</span>
          </a>
        </p>
        <a href="javascript:;" class="thumb">
          <img src="{{$value['feature']}}" alt="">
        </a>
      </div>
    </div>          
  {{/each}}
</script>

<script>
  $(function(){
    // var categoryId = location.search.split("=")[1];
    var categorId = location.search.split("=")[1];//获取herf上的参数值，分类ID
    var currentPage = 1;  //初始页码1
    var pageSize = 10;// 每页 10 条数据
    $(".loadmore>.btn").on("click",function(){
      $.ajax({
        type:"post",
        url:"./api/getMorePost.php",
        data:{
             "categoryId":categorId,
             "currentPage":++currentPage, //先自增在返回，请求下一页数据
             "pageSize":pageSize
        },
        dataType:"json",
        success:function(res){
         if(res.code == 1){ //code == 1  代码请求成功
           var more_html = template("morePost",res); //调用模板引擎的函数进行字符串拼接（本质是利用正则表达式进行替换，所有模板中不能写注释）
           $(more_html).insertBefore($(".loadmore"));//将字符串转化为JQ 对象 插入到 加载更多 按钮之前 
           var maxPage = Math.ceil(res.tortl/pageSize); // 总数据条数/每页数据条数  向上取整 获取最大页码 maxPage
           if(maxPage <= currentPage){  //与当前页码比较。 true则隐藏  加载更多按钮。
             $(".loadmore").hide();
           }
         }
        }
      });
    });
  });
</script>

<?php
　　　　//连接数据库，执行sql语句。返回一个空数组，或二维数组
    function mysql_select($sql){
        $conn = mysqli_connect("localhost","root","123456","db_baixiu");
        $res = mysqli_query($conn,$sql);
        $arr = [];
        if($res){
            while($row = mysqli_fetch_assoc($res)){
                $arr[] = $row;
            }
        }
        return $arr;
    }
    $categoryId = $_POST["categoryId"];
    $currentPage = $_POST["currentPage"];
    $pageSize = $_POST["pageSize"];
    $offset = ($currentPage - 1) * $pageSize; //偏移条数

    $sql = "select p.id,p.content,p.title,p.feature,p.created,p.views,p.likes,u.nickname,c.name
    ,(select count(id) from comments as com where com.post_id = p.id) as comNum
    from posts as p 
    left join users as u on u.id = p.user_id
    left join categories as c on c.id = p.category_id
    where p.category_id = {$categoryId}
    order by p.created desc
    limit {$offset},{$pageSize}";
   
    $tortlSql = "select count(id) as tortl from posts as p where p.category_id = {$categoryId}"; 
    $tortl = mysql_select($tortlSql)[0]["tortl"]; //获取总条数。 查询结果总是二维数组
    $postArr = mysql_select($sql);
    $res = array("code" => 0,"msg" => "获取数据失败");
      
    if($postArr){
        $res = array("code" => 1,"msg" => "获取数据成功","data" => $postArr,"tortl" => $tortl);
    }
    echo json_encode($res);
？>