<html> <head> <meta charset="gb18030" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script>
var totalheight = 0;
function loadData(){
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if ($(document).height() <= totalheight) { // 说明滚动条已达底部
/*这里使用Ajax加载更多内容*/
var container = $("#container"); // 加载容器
var data = {}; // 查询参数
// 当前页
var currentPage = parseInt(container.find('#currentPage').val());
// 总页数
var maxPage = parseInt(container.find('#maxPage').val());
// 查询日期范围
var startDate = container.find('#startDate').val());
var endDate = container.find('#endDate').val());
data.currentPage = currentPage;
data.maxPage = maxPage;
data.startDate =startDate;
data.endDate = endDate;
jQuery.ajax({
type:"POST",
url: "/servlet/query.do",
data:data,
dataType: "json",
beforeSend: function(XMLHttpRequest){
$("#loading").css('display','');
}, success:function(response) {
if(response.data){
for(var i=0, length = response.data.length; i<length; i++){
var html = response.data[i];
var test = $(html);
container.append(test);
}
container.find('#currentPage').val(parseInt(currentPage)+1));
$("#loading").css('display','none');
}
}, error:function(){
alert("加载失败");
}
});
}
}
$(window).scroll( function() {
loadData();
});
</script>
</head>
<body>
<div id="container">
这里显示内容
</div>
<div id='loading'>
<img src="./imgs/loading.gif"/>
</div>
</body>
</html>
转载于:https://my.oschina.net/kt431128/blog/224711