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 ; 
	    		            $comment += "		<div ; 
	    		            $comment += "		<img src="" + array['avatar']  + "" >"; 
	    		            $comment += "		<span>" + array['author'] + "</span>"; 
	    		            $comment += "		</div>"; 
	    		            $comment += "		<span ; 
	    		            $comment += "	</div>"; 
	    		            $comment += "	<div ; 
	    		            $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

Java Web SpringMVC AJAX，实现页面懒加载数据

相关推荐