PB通过API接口,实现AJAX点击加载更多新闻
时间:2019-08-07 来源:本站
官网上发的原始版本,特别整理一下重新发布。希望对大家有所作用
弟一步:
<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>
<script>
//先定义一些基本的内容
//Page就是第几页,由当前页0 + 1,就是第二页,parseInt确保该数值是Int类型。
var Page = parseInt('0') + 1;
//Num就是每页几条信息,因为列表默认显示的是2条,所以这里设为2,结合上面的第二页实际上就是从第三条信息开始读取。
var Num = 10;
//定义内容的Dom位置,也就是读取出来的内容要添加到哪个div里面去。
var Dom = jQuery('.list');
//接下来写在点击按钮('.more')的时候触发事件
jQuery('#More').on('click', function(){
//先构建Api的地址,具体的Api地址参数,请参考官方手册。
var url = '/api.php/list/2/page/' + Page + '/num/' + Num;
//开始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 ){
//定义Data变量为返回的数据
var Data = response.data;
if( response.code ){
//获取数据成功,进行循环,value就是文章对象
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 );
});
//分页+1,下次获取下一页的内容
Page += 1;
} else {
//返回数据错误
jQuery('#More').html('<span>' + Data + '</span>');
}
},
//请求失败
error: function( xhr, status, error ){
//返回数据异常
console.log( error );
}
})
})
</script>