滑輪滾動到頁面底部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>

到這裏就優雅的完成滾動加載了，看下效果圖,加載了兩條數據，在滑動顯示沒數據