html页面滑动到底自动调用ajax数据加载下一页
页面数据是已经调取ajax数据后展示的,页面滑动到底部需要做个判断,然后再次调用该接口数据,实现展示下一页数据;
通过下面的方法检测滑动到底部
$(window).scroll(function(){
if (Math.round($(window).scrollTop() + $(window).height()) == $(document).height()) {
//滑动到底部了
}
});
首次调用接口成功后保存下来需要的页面数据,比如current;再次调用接口是将current+1,并传入接口;
代码示例如下:
var c_url = 'pai';//公共接口
$.ajax({
type:"GET",
url:c_url+'/article/page',
dataType: "json",
success: function(res){
//这里在html渲染后台数据的操作
var current = res.data.current;//将数据保存在current中
$(window).scroll(function(){
if (Math.round($(window).scrollTop() + $(window).height()) == $(document).height()) {
current++;
$.ajax({
type:"GET",
url:c_url+'/article/page?current='+current,
dataType: "json",
success: function(res){
//此时调用的current+1后的数据
//在这里进行操作,将数据渲染到html页面即可;
}
});
}
});
}
});
更多推荐
html页面滑动到底自动调用ajax数据加载下一页
发布评论