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

淩亂°似流年 2022-04-22 08:38 182阅读 0赞

# 一：效果图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70][]

# 二：思路 #

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页面 ###

### 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引入依赖

<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][http_json-lib.sourceforge.net_apidocs_net_sf_json_JSONArray.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70]: /images/20220422/2f4e9014d13b4b31a1aeae8c8a25d758.png
[http_json-lib.sourceforge.net_apidocs_net_sf_json_JSONArray.html]: http://json-lib.sourceforge.net/apidocs/net/sf/json/JSONArray.html