这篇博客详细介绍了前端如何通过Ajax与后端进行交互，实现在滚动页面时动态加载更多图片。前端使用JavaScript设置最大页数、当前页数和每页显示数量，并监听滚动事件，当接近页面底部时，向后端发送请求获取新的图片数据。后端通过MybatisBaseQuery处理请求，返回当前页和总页数等信息。整个过程实现了前端无限滚动加载的效果。
前端
//最大页数
var mix = "";
var currentPage = "";
var pageSize = 5;
//标识
var pagenew = 1;
//加载图片
$.ajax({
url:"/img/newImg",
type:"post",
data:{"currentPage":1,"pageSize":10},
success:function (res) {
mix=res.totalPage;
$("#cardList").empty();
$.each(res.list,function (n,i) {
$("#cardList").append("
");});
}
});
$(function(){
$(window).scroll(function () {
if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
// alert("s");
pagenew = 2;
currentPage ++;
if(currentPage > mix){
return false;
}else{
ajaxpage(currentPage,pageSize);
}
}
});
});
function ajaxpage(currentPage,pageSize){
$.ajax({
url:"/img/newImg",
type:"post",
data:{"currentPage":currentPage,"pageSize":pageSize},
success:function (res) {
console.log(res);
$.each(res.list,function (n,i) {
$("#cardList").append("
");});
pagenew = 1;
}
});
}
后端：
@RequestMapping("newImg")
@ResponseBody
public MybatisBaseQuery newImg(@RequestParam(value = "currentPage")Integer currentPage,@RequestParam(value = "pageSize")Integer pageSize){
Integer totalNum=imgService.totalNum();
MybatisBaseQuery mybatisBaseQuery=new MybatisBaseQuery();
mybatisBaseQuery.setBaseQueryInfo(currentPage,pageSize,totalNum);
List> maps=imgService.newImg(mybatisBaseQuery.getStartNum(),mybatisBaseQuery.getPageSize());
mybatisBaseQuery.setList(maps);
return mybatisBaseQuery;
}
后端返回格式为：
currentPage: 6
endNum: 30
list: (5) [{…}, {…}, {…}, {…}, {…}]
pageSize: 5
searchKey: null
startNum: 25
totalPage: 94
__proto__: Object
注意：本文归作者所有，未经作者允许，不得转载
扫一扫
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
