滑轮滚动到页面底部ajax加载数据实例

引言：滚动下拉到页面底部加载数据是很多网站数据的主流加载方式，小编在做项目时用到了这个技术，先向大家分析一下。

先给出需要实现的图，这是小编自己写的一个网站。先需要实现下拉刷新技术。

 1.html部分代码：

这是页面中间展示数据的代码，别忘了导jquery包和c标签，现在要实现滑轮滚动到底部，在</c:forEach>后再追加刷新的数据

<div class="bloglist"> <ul id="ulbloglist"> <c:forEach var="bolg" items="${page}"> <li> <i class="blogpic"><a href="${basePath}/${bolg.user_name}/article/details?id=${bolg.bolg_id}"><img src='${basePath}/resource/images/${bolg.bolg_pic}' onerror="this.src='${basePath}/resource/images/2.jpg';this.onerror=null"></a></i> <dl> <dt><a href="${basePath}/${bolg.user_name}/article/details?id=${bolg.bolg_id}" target="_blank">${bolg.bolg_title}</a></dt> <dd><span class="bloginfo">${bolg.bolg_brief_content}</span> <p class="timeinfo"><span class="lanmu"><a href="${basePath}/${bolg.user_name}/" target="_blank">作者：${bolg.user_name}</a></span><span class="date">${bolg.creation_time}</span></p> <a class="read" href="${basePath}/${bolg.user_name}/article/details?id=${bolg.bolg_id}">阅读更多</a> </dd> </dl> </li> </c:forEach> </ul> </div>

2.js部分代码（用的是jquery）

<script type="text/javascript"> //数据是按页划分,一页显示规定条数的数据 var totalPages = $("#totalPage").val();//总页数 var pageno = 1;//当前页数 $(function(){ //获取滑轮滚动事件 $(window).scroll(function() { //滚动的距离 var scrollTop = $(this).scrollTop(); //当前窗口的高度 var windowHeight = $(this).height(); //文档总高度 var scrollHeight = $(document).height(); //当滚动的距离 + 当前窗口的高度 - scrollHeight = 0 说明到页面底部了 var positionValue = (scrollTop + windowHeight) - scrollHeight; if (positionValue == 0) { //判断当前页数是否小于总页数 if (pageno < totalPages) { pageno++; //执行从后台获取数据 doSomething(pageno); } else { alert('没有更多了'); } } }) }); function doSomething(pageno) { $.ajax({ type : "post", url : "frepage", data : {"currentPage":pageno}, //是预期服务器返回的数据类型，很多人返回的是json或jsonp和text //我发现返回数据设置为html非常好用等下看后台代码 dataType: 'html', success : function (data) { //直接将返回的html数据用jquery追加到ulbloglist后 $("#ulbloglist").append(data); }, error : function() { alert("异常！"); } }); } </script>

3.后台代码（java+mvc框架）

前端传递的数据data : {"currentPage":pageno}，mvc框架它会直接封装到后台的Page类里

//滑动刷新页面 @RequestMapping("frepage") public ModelAndView frepage(Page pg) { return indexSeriver.frepage(pg); }

Page类

private int currentPage=1; //当前页数 private int totalPages; //总页数? private int totalUsers; //记录总行数? private int pageSize=5; //每页记录行数 private int nextPage; //下一页? private int prefPage; ....下面给get和set方法省略了

Seriver类

@Override public ModelAndView frepage(Page pg) { ModelAndView andView = new ModelAndView(); //采用分页查找查找到数据 andView.addObject("page", findContextByPage(pg)); //这里返回Page自己，也可以不返回，根据需求来 andView.addObject("pageInfo", pg); //返回一个jsp文件，到前端就是html文件 andView.setViewName("/indexNewBolg"); return andView; }

findContextByPage方法，也就是分页查找,select * from bolg where bolg.bolg_status != 0 LIMIT #{start}, #{end}

@Autowired BolgDao bolg; public List<HashMap<String, Object>> findContextByPage(Page pg) { //总条数，bolg为dao层访问数据库接口 int maxCount = bolg.getBolgCount().size() //设置总记录数 pg.setTotalUsers(bolg.getBolgCount().size()); //getBolgByPage也就是分页查找，两个参数为limit开始和结束 //(pg.getCurrentPage() - 1) * pg.getPageSize()为开始 //pg.getCurrentPage()*pg.getPageSize()为结束 List<HashMap<String, Object>> list = bolg.getBolgByPage( (pg.getCurrentPage() - 1) * pg.getPageSize(),pg.getCurrentPage()*pg.getPageSize()); return list; }

 indexNewBolg.jsp文件，只需要在写一个forEach，把serive层刚读的数据放进去就行

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@include file="../common/taglib.jsp" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="tag"%> <c:forEach var="bolg" items="${page}"> <li> <i class="blogpic"><a href="#"><img src='${basePath}/resource/images/${bolg.bolg_pic}' onerror="this.src='${basePath}/resource/images/2.jpg';this.onerror=null"> </a></i> <dl> <dt><a href="#" target="_blank">${bolg.bolg_title}</a></dt> <dd><span class="bloginfo">${bolg.bolg_brief_content}</span> <p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">作者：${bolg.user_name}</a></span><span class="date">${bolg.creation_time}</span></p> <a class="read" href="/">阅读更多</a> </dd> </dl> </li> </c:forEach>

到这里就优雅的完成滚动加载了，看下效果图,加载了两条数据，在滑动显示没数据