ajax+java实现页面的加载更多功能
ajax+java实现页面的加载更多功能
现在的页面中很多都是采用加载更多方式实现显示信息的拓展。今天个人也做了一个。
我做的时候采用的是ssm框架,如果您不是ssm框架,不要紧,重要的了解如何做,在使用其他的技术实现即可。
先简单说下思路:
我做的这个功能其实也是一个分页,页面加载时,加载第一页的内容,之后每次点击加载更多的时候,就会加载下一页的内容,即点击加载更多,查询出下一页的内容,返回给页面,并追加到页面展示信息的末尾。
加载更多
我的做法是,我的页面每次第一次加载的时候都是加载第一页的10条内容,然后在信息的最后展示一个加载更多按钮。因此定义一个全局变量,默认为第一页,每次点击加载更多的时候,都会将页数加1,传递到后台,查询下一页的内容。将后台返回的分好页的信息追加到页面上。采用ajax的append的方法追加。
//我的全局变量
var page=1;
function getMore(btn){
//定义我需要追加的html代码
var html;
//页数加1
page=page+1;
//发送ajax请求
$.ajax({
url:"/index/getmore",
type:"POST",
dataType : "json",
data:{"page":page},
success :function(result){
//成功返回信息时
if(result.status==200){
//使用each遍历返回的列表的内容,样式什么的自己拼拼吧,和你页面加载的时候样式一样就好了,把内容改了就ok
$.each(result.data,function(i,result){
html=html+''+result.articleContent+''+
' 阅读更多 ';
});
//拼好之后,我这句代码的意思是,找到当前点击的按钮的父div,即包含他的第一个div,然后在末尾将信息拼接上去
$(btn).parent('div').append(html);
}
else{
alert('没有更多了');
}
}
});
}
controller接收前台传入的页面的页数,service进行查询并使用pagehelper进行分页,将传入的页码的信息返回。只返回单页的。
我采用的是pagehelp的分页插件,如果有不会使用的可以参考我的另一篇博客:
https://blog.csdn/qq_36233506/article/details/90598719
@RequestMapping(value="/index/getmore",produces="application/json;charset=utf-8")
@ResponseBody
public E3Result getMore(@RequestParam("page") int page){
//页数,显示的条数为5,接收service返回的分号页的结果
List list= blogService.getArticlesOrderByLikes(page,5);
//这个是我自己定义的用于返回信息的类(包含数据、状态码、错误信息等)
E3Result result =new E3Result(list);
return result;
}
@Override
public List getArticlesOrderByLikes(int page, int rows) {
//设置分页信息(该语句只对他之后的第一条查询语句生效)
PageHelper.startPage(page,6);
//执行查询
List list = bArticlesMapper.selectByExampleWithBLOBs(null);
//取分页结果
PageInfo pageInfo = new PageInfo(list);
//取得分好页的单页结果
List list2 = pageInfo.getList();
return list2;
}
前台水平一般,只能做成这样了。大家可以多交流
ajax+java实现页面的加载更多功能相关教程
更多推荐
点击加载更多java实现_ajax+java实现页面的加载更多功能
发布评论