載入更多 功能的實現

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