PbootCMS列表内容ajax无刷新加载数据？前段时间，群里有位同学问起Ajax加载的问题，这个不属于模板制作系列教程的内容，因此单独再出一个使用技巧系列的教程。

该系列会写一些pbootcms在使用过程中碰到的一些问题，以及问题的解决方案。

大家也可以给我反馈一些问题，有空的时候我会选一些写出来放在这个系列的教程里面。

Ajax无刷新加载内容，看起来高大上一点，但是对SEO是不太友好的，所以在使用的时候应该有个取舍。

由于PbootCMS的Api接口的存在，在PbootCMS上实现Ajax加载还是比较方便的。

使用方法

一、点击更多按钮加载内容

1、首先，添加一个按钮用来触发事件。

<button?class="more"?type="submit">点击加载更多</button>

2、添加默认显示的页面内容（只是演示，结构我就随意写了）

<div?class="list">
????{pboot:list?scode=3?num=2}
????<div?class="title">[list:title]</div>
????<div?class="desc">[list:description]</div>
????<hr>
????{/pboot:list}
</div>

3、js代码部分，先引入jQuery

//先定义一些基本的内容

//Page就是第几页，由当前页{page:current}?+?1，就是第二页，parseInt确保该数值是Int类型。
var?Page?=?parseInt('{page:current}')?+?1;

//Num就是每页几条信息，因为列表默认显示的是2条，所以这里设为2，结合上面的第二页实际上就是从第三条信息开始读取。
var?Num??=?2;

//定义内容的Dom位置，也就是读取出来的内容要添加到哪个div里面去。
var?Dom??=?jQuery('.list');

//接下来写在点击按钮（'.more'）的时候触发事件
jQuery('#More').on('click',?function(){

????//先构建Api的地址，具体的Api地址参数，请参考官方手册。
????var?url?=?'/api.php/list/3/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?){
????????????????????//将内容append到列表
????????????????????var?Html?=?'<div?class="title">'?+?value.title?+?'</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?);
????????}
????})
})

完成，点击一下加载更多，页面就会无刷新加载2篇文章了。

二、页面滑动到底部加载更多文章

原理同上，只不过改变一下事件，原来是点击按钮触发的，改成滚动监听。

//使用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/3/page/'?+?Page?+?'/num/'?+?Num;
????????
????????//设置开关状态为关闭，防止重复加载
????????load?=?false;
????????
????????jQuery.ajax({
????????
????????????//部分代码省略
????????????......
????????????
????????????success:?function(?response,?status?){
????????????????
????????????????var?Data?=?response.data;
????????????????
????????????????if(?response.code?){
????????????????????
????????????????????//获取数据成功
????????????????????jQuery.each(?Data,?function(?index,?value?){
????????????????????????......
????????????????????});
????????????????????
????????????????????//设置开关状态为开启，进行下次加载
????????????????????load?==?true;
????????????????????
????????????????????//页码+1
????????????????????Page?+=?1;
????????????????????
????????????????}?else?{
????????????????????
????????????????????//返回数据错误
????????????????????jQuery('#More').html('<span>'?+?Data?+?'</span>');
????????????????????
????????????????}
????????????????
????????????},
????????????
????????????error:function(?xhr,?status,?error?){?......?}
????????????
????????})
????????
????}
????
})

总结：Ajax并没有想象中的难度那么大，特别是有了PbootCMS的Api接口之后，获取数据更容易，使用更方便。

云部落资源网普通

打赏 收藏 海报 链接