html页面滑动到底自动调用ajax数据加载下一页

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页面即可;
                    }
               });
          }
       });
     }
});
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值