ajax 滚动加载

本文介绍了如何利用Ajax实现页面滚动到底部时自动加载更多内容的功能。通过监听滚动事件,当用户滚动到页面底部时,发送Ajax请求获取新数据。在接收到数据后,将新内容追加到页面中,并在所有数据加载完毕后显示提示信息。
var page = 2;
var sover = 0;
window.onscroll = function () {
if(window.innerHeight + $(document).scrollTop()==document.body.scrollHeight){
if(this.sover==0){
   //触发ajax事件获取记录
       $.ajax({
type : 'GET',
url : '<%=basePath%>demand/list?pageSize=5&pageNum='+page,
dataType :'json',
success : function(data) {
if(data.list.length==0){
alert("加载完毕");
}else{
var result ="";
for (var i = 0; i < data.list.length; i++) {
result+='<li onmouseover="this.style.background=\'#efefef\'" onmouseout="this.style.background=\'#fff\'" class="demand" style="height: 120px;">'
    +'<a href="javascript:;" onclick="detail('+data.list[i].id+')" style="font-size: 22px;margin-top: 10px;">'+data.list[i].projectname+'</a>'
    +'<p style="font-size: 16px;">'+data.list[i].demand+'</p>'
    +'<p style="margin-top: 10px;">'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">'+data.list[i].username+'</small>'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">'+data.list[i].datatime+'</small>'
+'<small style="color:#9D9D9D;font-size:10px;margin-left:15px;">阅读'+data.list[i].demandview+'</small>'
    +'</p></li>';
}
setTimeout(function() {
var index =index = layer.load(1,{shade:[0.1,'#fff']}); 
    setTimeout(function(){layer.close(index);},300); 
$('.prolist').append(result);
    page += 1;
//最后一页
if (data.pageNum==data.pages) {
this.sover = 1;
loadover();
 }
}, 1000);
}
}
       });
  }
      
}; 

}
                    //加载完
function loadover() {
if (sover == 1) {
var overtext = "Duang~到底了";
if ($(".loadover").length > 0) {
$(".loadover span").eq(0).html(overtext);
} else {
var txt = '<div class="loadover" style="background-color: white;"><span>'+overtext+'</span></div>';
$("body").append(txt);
}
}
}
                   
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值