PB通过API接口,实现Ajax无刷新加载内容,下滑自动加载更多新闻
时间:2019-08-24 来源:本站
这个内容是官网上发的,不过那个上面写的,作为小白来看,会觉得有点不清不楚,特别整理一下重新发布。希望对大家有所作用
弟一:引入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>