Java EE之使用ajax完成載入更多
阿新 • • 發佈:2018-12-19
一:效果圖
二:思路
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>