页面滚动到底部 ajax加载内容代码:
html结构:
<div class="ipshowListA"> <ul class="clearfix"> <!--<li class="item">内容块</li>--> </ul> </div> <div class="pagesA"> <div class="more" data-url = "jsonlist.php?page=1" >点击加载更多</div> <div class="loading"><!--数据加载中...--></div> <div class="nodata">没有更多数据了...</div> </div>
js代码:
// JavaScript Document $(function(){ var $btn_more = $('.pagesA .more');//更多按钮 var $btn_loading = $('.pagesA .loading');//载入中 var $btn_nodata = $('.pagesA .nodata');//没有数据了 var $box = $('.ipshowListA ul');//容器 var lock = false; var nexturl = $btn_more.data('url');//第一次url function _more(){ $btn_more.show(); $btn_loading.hide(); $btn_nodata.hide(); } function _loading(){ $btn_more.hide(); $btn_loading.show(); $btn_nodata.hide(); } function _nodata(){ $btn_more.hide(); $btn_loading.hide(); $btn_nodata.show(); } //点击触发 (ajax加载数据) $btn_more.on('click',function(){ ajaxLoad(); }); //距离底部300触发 (ajax加载数据) $(window).on('scroll',function(){ if( $(document).height() - $(window).scrollTop() - $(window).height() < 300 ){ ajaxLoad(); } }) //ajax加载数据 function ajaxLoad(){ //锁 if( lock ){return false; }else{ lock = true; } _loading(); $.ajax({ url:nexturl, type:'get', dataType:'json', success:function(d){ //{"error":0 , "msg":"ok" , "html":"6666", "nexturl":"jsonlist.php?page=1"} if(d.error == 0 ){ //加载成功 $box.append( d.html ); lock = false; _more(); nexturl = d.nexturl; //更新下一页地址 }else if(d.error == 1 ){ //没有数据了 _nodata(); }else{ //其他错误 alert( d.msg ); lock = false; } }, error:function( a,b,c){ console.log('ajax错误:', a,b,c ); } }) } });
php代码:
<?php sleep(3);//模拟网络延时 3秒 //返回的 json数据结构 //{"error":0 , "msg":"ok" , "html":"6666", "nexturl":"jsonlist.php?page=1"} $page = $_GET['page']; if( $page > 5 ){ //没有数据了 //{"error":1 , "msg":"没有数据了" , "html":"", "nexturl":""} $j = array(); $j['error'] = 1; $j['msg'] = '没有数据了'; $j['nexturl'] = ''; $j['html'] = ''; die( json_encode($j) ); } ///////////////////////////////////////////////////////////////////////////// $page++; $j = array(); $j['error'] = 0; $j['msg'] = 'ok'; $j['nexturl'] = 'jsonlist.php?page=' . $page; $j['html'] = ' <li class="item">内容块</li> <li class="item">内容块</li> <li class="item">内容块</li> ... '; die( json_encode($j) );