滑轮滚动到页面底部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>

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