加载更多功能的实现

2018-12-25 08:21:59来源：博客园阅读 ()

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

代码

 1 <script src="./static/assets/vendors/jquery/jquery.js"></script>
 2 <script src="./static/assets/vendors/art-template/template-web.js"></script>  //引入模板引擎
 3  <script type="text/template" id ="morePost"> //模板
 4   {{each data}}
 5     <div class="entry">
 6       <div class="head">
 7         <a href="detail.php?postid={{$value['id']}}">{{$value['title']}}</a>
 8       </div>
 9       <div class="main">
10         <p class="info">{{$value["nickname"]}} 发表于 {{$value["created"]}}</p>
11         <p class="brief">{{$value["content"]}}</p>
12         <p class="extra">
13           <span class="reading">阅读({{$value["views"]}})</span>
14           <span class="comment">评论({{$value["comNum"]}})</span>
15           <a href="javascript:;" class="like">
16             <i class="fa fa-thumbs-up"></i>
17             <span>赞({{$value["likes"]}})</span>
18           </a>
19           <a href="javascript:;" class="tags">
20             分类：<span>{{$value["name"]}}</span>
21           </a>
22         </p>
23         <a href="javascript:;" class="thumb">
24           <img src="{{$value['feature']}}" alt="">
25         </a>
26       </div>
27     </div>          
28   {{/each}}
29 </script>
30 
31 <script>
32   $(function(){
33     // var categoryId = location.search.split("=")[1];
34     var categorId = location.search.split("=")[1];//获取herf上的参数值，分类ID
35     var currentPage = 1;  //初始页码1
36     var pageSize = 10;// 每页 10 条数据
37     $(".loadmore>.btn").on("click",function(){
38       $.ajax({
39         type:"post",
40         url:"./api/getMorePost.php",
41         data:{
42              "categoryId":categorId,
43              "currentPage":++currentPage, //先自增在返回，请求下一页数据
44              "pageSize":pageSize
45         },
46         dataType:"json",
47         success:function(res){
48          if(res.code == 1){ //code == 1  代码请求成功
49            var more_html = template("morePost",res); //调用模板引擎的函数进行字符串拼接（本质是利用正则表达式进行替换，所有模板中不能写注释）
50            $(more_html).insertBefore($(".loadmore"));//将字符串转化为JQ 对象 插入到 加载更多 按钮之前 
51            var maxPage = Math.ceil(res.tortl/pageSize); // 总数据条数/每页数据条数  向上取整 获取最大页码 maxPage
52            if(maxPage <= currentPage){  //与当前页码比较。 true则隐藏  加载更多按钮。
53              $(".loadmore").hide();
54            }
55          }
56         }
57       });
58     });
59   });
60 </script>

 1 <?php
　　　　//连接数据库，执行sql语句。返回一个空数组，或二维数组
 2     function mysql_select($sql){
 3         $conn = mysqli_connect("localhost","root","123456","db_baixiu");
 4         $res = mysqli_query($conn,$sql);
 5         $arr = [];
 6         if($res){
 7             while($row = mysqli_fetch_assoc($res)){
 8                 $arr[] = $row;
 9             }
10         }
11         return $arr;
12     }
13     $categoryId = $_POST["categoryId"];
14     $currentPage = $_POST["currentPage"];
15     $pageSize = $_POST["pageSize"];
16     $offset = ($currentPage - 1) * $pageSize; //偏移条数
17 
18     $sql = "select p.id,p.content,p.title,p.feature,p.created,p.views,p.likes,u.nickname,c.name
19     ,(select count(id) from comments as com where com.post_id = p.id) as comNum
20     from posts as p 
21     left join users as u on u.id = p.user_id
22     left join categories as c on c.id = p.category_id
23     where p.category_id = {$categoryId}
24     order by p.created desc
25     limit {$offset},{$pageSize}";
26    
27     $tortlSql = "select count(id) as tortl from posts as p where p.category_id = {$categoryId}"; 
28     $tortl = mysql_select($tortlSql)[0]["tortl"]; //获取总条数。 查询结果总是二维数组
29     $postArr = mysql_select($sql);
30     $res = array("code" => 0,"msg" => "获取数据失败");
31       
32     if($postArr){
33         $res = array("code" => 1,"msg" => "获取数据成功","data" => $postArr,"tortl" => $tortl);
34     }
35     echo json_encode($res);
36 ？>