加载更多 功能的实现

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

新老客户大回馈,云服务器低至5折

发送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 ?>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【土旦】 使用Vant 的Uploader 上传图片 重定义返回格式 使用For

下一篇:react 中的blur事件