一：效果圖

二：思路

  ajax向後端傳入點選載入更多按鈕的次數，進而控制後端從資料庫取出資料的位置，以及每次取出的數量

int count=6;//每次從資料庫取出的數量
int clickNum=Integer.parseInt(request.getParameter("clickNum"));//獲取點選載入更多次數;// 1 2 3 4
int start = clickNum*count;//每次點加的查詢位置(初始頁面會顯示6條資料，所以從6開始) // 6 12 18  24

//根據獲取前端傳過來的page進行分頁查詢
List<Message> messages =messageService.getMessages(start,count);//查詢

三： 程式碼實現   

 主要有：jsp,dao,service,controller頁面

1：jsp頁面

<script type="text/javascript">
    // 實現載入更多
    var clickNum = 0;//點選次數
    function more(){
        clickNum++;
        $.ajax({
            type:"post",
            url:"<%=request.getContextPath()%>/show/more.do?clickNum="+clickNum,
            dataType:"json",
            success:function(data){
                var str="";
                $.each(data,function(i,message){
                    str+=`
                         <div class="new-list-item clearfix">
                            <div class="col-xs-4">
                                <img src="`+message.src+`" alt="">
                            </div>
                            <div class="col-xs-7">

                                <a href="/show/detail.do?id=`+message.id+`&userId=`+message.userId+`" class="title">`+message.title+`</a>
                                <div class="content">
                                        <%--<p>${message.content}</p>--%>
                                </div>
                                <div class="info">
                                    <span> <span class="avatar"><img src="../../img/logo.png"></span>猿夢</span> ⋅
                                    <span>25k</span> ⋅
                                    <span>`+message.title+`</span>
                                </div>

                            </div>
                        </div>

                    `;
                });

                $(".mylist").append(str);
            }
        });
    }
</script>
 

2: controller頁面

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //初始顯示6條資料
        if ("/show/message.do".equals(request.getServletPath())){


            List<Message> messages =messageService.getMessages(0,6);//分頁查詢全部留言
            if (messages!=null){
                request.setAttribute("messages",messages);
                request.getRequestDispatcher("/WEB-INF/views/message.jsp").forward(request,response);
            }

        // 前臺載入更多
        } else if("/show/more.do".equals(request.getServletPath())){


            int count=6;//每次從資料庫取出的數量
            int clickNum=Integer.parseInt(request.getParameter("clickNum"));//獲取點選載入更多次數;// 1 2 3 4
            int start = clickNum*count;//每次點加的查詢位置(初始頁面會顯示6條資料) // 6 12 18  24

           
            List<Message> messages =messageService.getMessages(start,count);//查詢
            
            //把message變成json資料，使用了（https://mvnrepository.com/artifact/net.sf.json-lib/json-lib）
            JSONArray json = JSONArray.fromObject(messages);
            String str = json.toString();
            response.getWriter().write(str);
            
        }
        
 

3：service頁面

    /**
     * 查詢部分文章
     * @param start （開始位置）從點選數*6個
     * @param count 每頁數量
     * @return
     */
    public List<Message> getMessages(int start, int count)   {
        // 得到messages
        return messageDao.getMessageList(start,count);
    }

4：dao頁面

    public List<Message> getMessageList(int start , int count)  {

        Connection conn=null;

        PreparedStatement stmt = null;
        ResultSet rs = null;
        List<Message> messages = new ArrayList<Message>();
        try {
            conn=ConnectUtil.getConnection();
            String sql="select * from message order by create_time desc limit ?,?";
            stmt = conn.prepareStatement(sql);
            stmt.setInt(1, start );//開始位置
            stmt.setInt(2, count);//結束位置
            rs = stmt.executeQuery();
            while (rs.next()) {
                messages.add(new Message(
                        rs.getInt("id"),
                        rs.getInt("user_id"),
                        rs.getString("username"),
                        rs.getString("title"),
                        rs.getString("content"),
                        rs.getTimestamp("create_time")));

            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            ConnectUtil.release(rs, stmt, conn);
        }
        return messages;
    }

初始頁面：select * from message order by create_time desc limit 0,6  

第一次點選載入更多：select * from message order by create_time desc limit 6,6

第二次點選載入更多：select * from message order by create_time desc limit 12,6

第三次點選載入更多：select * from message order by create_time desc limit 18,6

補充：

JSONArray json = JSONArray.fromObject(messages);（List<message>轉成JSON格式）

這個物件需要額外的jnet.sf.json包，這裡使用maven引入依賴

<!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib -->
<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.4</version>
    <classifier>jdk15</classifier>
</dependency>
<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.7.0</version>
</dependency>
<dependency>
    <groupId>commons-collections</groupId>
    <artifactId>commons-collections</artifactId>
    <version>3.1</version>
</dependency>
<dependency>
    <groupId>commons-lang</groupId>
    <artifactId>commons-lang</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupId>net.sf.ezmorph</groupId>
    <artifactId>ezmorph</artifactId>
    <version>1.0.3</version>
</dependency>