Java Web SpringMVC AJAX，實現頁面懶加載數據

因為做的微信端的網頁，所以在顯示后台數據的時候，要么分頁，要么全部加載數據，開始分頁對於用戶來說，其實體驗不是很好，畢竟要去不斷的點擊下一頁，但是如果我把全部數據讀取出來的話，但用戶可能也就看前面幾條而已，那么就會造成性能的大大浪費。

所以我就上網找了ajax懶加載方面的內容，成功實現了，在用戶滾動的時候判斷是否到達頁面底部，是的話就通過ajax請求數據，然后顯示出來。

javascript代碼

<script type="text/javascript">
$(function() {
	// 記錄頁數
	var $page = 1;
	// 懶加載
	var winH = $(window).height(); //頁面可視區域高度
	$(window).scroll(function () { 
	    var pageH = $(document.body).height(); 
	    var scrollT = $(window).scrollTop(); //滾動條top 
	    var aa = (pageH-winH-scrollT)/winH;
	    if(aa<0.02){
	    	$page++;
	    	$.ajax({
	    		type : "get",
	    		url : "<c:url value='/getdata/" + $page + "' />",
	    		dataType : "json",
	    		success : function(data) {
	    			if (data) {
	    				$.each(data,function(index,array){ 
	    		            $comment += "<li><div id=\"index_list_user\">"; 
	    		            $comment += "		<div id=\"index_list_user_wx\">"; 
	    		            $comment += "		<img src=\"" + array['avatar']  + "\" >"; 
	    		            $comment += "		<span>" + array['author'] + "</span>"; 
	    		            $comment += "		</div>"; 
	    		            $comment += "		<span id=\"index_list_user_bookName\">《" + array['book']['title'] + "》</span>"; 
	    		            $comment += "	</div>"; 
	    		            $comment += "	<div id=\"index_list_content\">"; 
	    		            $comment += "	<span>" + array['content'] + "</span>";
	    		           $comment += "	</div>";
	    		           $comment += "	</li>";
	    		           $(".index_list").append($comment); // 把上面的html添加到要顯示的標簽上
	    		          }); 
	    			}
	    		}
	    	});
	    } 
	  }); 
});
</script>

java代碼

@RequestMapping(value = "/getdata/{page}", method = GET)
@ResponseBody
public List<Comment> indexPage(
		@PathVariable int page) {
	        page--;
		page = page < 0 ? 0 : page;
		List<Comment> bookComments = rmbookCommentService.getToIndexByLimit(
				page*ReadMeetInitParameters.getCountPerPage(), ReadMeetInitParameters.getCountPerPage());

		return bookComments;
}

在Java代碼上轉換JSON的時候可能會有問題，我參考的解決方案：http://blog.csdn.net/kinginblue/article/details/51236938

參考地址：http://www.jb51.net/article/65073.htm