載入更多 功能的實現

傳送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);
？>