当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 加载更多 功能的实现

加载更多 功能的实现

2018年12月25日  | 移动技术网IT编程  | 我要评论

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网