PB通过API接口,实现Ajax无刷新加载内容,下滑自动加载更多新闻
时间:2019-08-07 来源:大庆市外贸网站建设
这个内容是官网上发的,不过那个上面写得不是很清楚,特别整理一下重新发布。希望对大家有所作用
**:引入JS <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 第二: <!------------定义内容的Dom位置-----------------> <div class="mylist"> {pboot:list num=2 order='sorting asc'} <div class="title"><a href="[list:link]">[list:title]</a></div> <div class="desc">[list:description]</div> <hr> {/pboot:list} </div> 第三:添加按钮 <button id="More" type="submit">点击加载更多</button> 第四:添加JS <script> //先定义一些基本的内容 //Page就是第几页,由当前页0 + 1,就是第二页,parseInt确保该数值是Int类型。 var Page = parseInt('1') + 1; //Num就是每页几条信息,因为列表默认显示的是2条,所以这里设为2,结合上面的第二页实际上就是从第三条信息开始读取。 var Num = 5; //定义内容的Dom位置,也就是读取出来的内容要添加到哪个div里面去。 var Dom = jQuery('.mylist'); //使用jQuery的scroll()方法来监听页面滚动 jQuery(window).scroll(function(){ //当前窗口和页面顶部的距离 var WindowTop = jQuery(window).scrollTop(); //可视窗口区域高度 var WindowHeight = jQuery(window).outerHeight(); //页面的高度 var DocHeight = jQuery(document).height(); //定义一个开关 var load = true; //判断:(窗口与页面顶部距离 + 窗口高度) >= 页面的高度(也就是滚动到页面底部的时候),并且开关是开启状态,执行ajax加载内容 if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){ //请求地址 var url = '/api.php/list/2/page/' + Page + '/num/' + Num; //设置开关状态为关闭,防止重复加载 load = false; //开始Ajax提交请求,请求路径就是Api接口 jQuery.ajax({ //请求类型 type: 'POST', //请求地址 url: url, //返回数据类型 dataType: 'json', //请求参数,参考官方Api手册,在站内使用以下参数会自动获取 data: { appid: '{pboot:appid}', timestamp: '{pboot:timestamp}', signature: '{pboot:signature}', }, //请求成功 success: function( response, status ){ var Data = response.data; if( response.code ){ //获取数据成功 jQuery.each( Data, function( index, value ){ //获取一些数据 var Article_Url = '/index.php/content/' + value.id, Article_Date = value.date.split(' ')[0]; //将内容append到列表 var Html = '<div class="title"><a href="' + Article_Url + '">' + value.title + '</a></div><div class="desc">' + value.description + '</div><hr>'; //在原本的数据列表后面添加新的数据 Dom.append( Html ); }); //设置开关状态为开启,进行下次加载 load == true; //页码+1 Page += 1; } else { //返回数据错误 jQuery('#More').html('<span>' + Data + '</span>'); } }, error:function( xhr, status, error ){ //将内容append到列表 var Html = '加载数据错误'; //在原本的数据列表后面添加新的数据 Dom.append( Html ); } }) } }) </script>
声明:本站部分文章和图片来源于网络,如果侵犯到了您的权益,请联系我们,我们会及时删除。