点击加载更多java实现_ajax+java实现页面的加载更多功能

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实现页面的加载更多功能相关教程