Java EE之使用ajax完成加载更多

一：效果图

二：思路

  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>

文档地址：http://json-lib.sourceforge.net/apidocs/net/sf/json/JSONArray.html