一:效果图
二:思路
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