pbootcms使用api接口实现Ajax无刷新加载更多文章
发布时间:2023-12-03 01:11:38 作者:超级管理员 点击:71 【 字体:大 中 小 】
实现方法
pbootcms自带了API接口,我们可以通过这个API接口http://IP/api.php/list/ 调取分页所需的数据。
我建议这种分页,不要一上来就全部使用Ajax获取数据,因为Ajax是不会被百度收录的。
我建议的做法是,在列表页先使用模板标签输出一些数据。例如:
<div class="newslist"> <ul> {pboot:list num=6} <li> <a href="[list:link]">[list:title]</a> </li> {/pboot:list} </ul> <a href="javascript:;" class="loadmore">加载更多</a> </div>
先读取6条数据,让搜索引擎最少能抓取到最新的6条文章。
然后再使用Ajax去调取剩余的新闻内容,实现点击加载更多的效果。
下面就是核心AJAX调取API数据部分代码
<script> $(function(){ var Page = 1; // 每页展示12个 var Num = 6; $(document).on('click','.loadmore',function(){ // 页数 Page++; $.ajax({ type: 'POST', url: '/api.php/list/{sort:scode}/page/' + Page + '/num/' + Num + '/order/sorting', dataType: 'json', data: { appid: '{pboot:appid}', timestamp: '{pboot:timestamp}', signature: '{pboot:signature}', }, success: function( response, status ){ console.log(response); var Data = response.data; if( response.code ){ //获取数据成功 var Html = ''; jQuery.each( Data, function( index, value ){ //构建HTML Html += '<li>'; Html += ' <a href="'+ value.contentlink +'">'+ value.title +'</a>'; Html += '</li>'; }); // 为了测试,延迟1秒加载 setTimeout(function(){ // 插入数据到页面,放到最后面 $('.newslist ul').append(Html); },500); }else{ $('.loadmore').slideUp(); } }, error: function(xhr, type){ console.log('Ajax error!'); } }); }); }); </script>
简单解释一下这个代码,从第二页开始读取,每次读取6条。为什么从第二页开始读取?因为前面我们已经在模板里输出6条数据啦。
注意事项
请注意在后台开启WebAPI,如下图。
其中API强制认证,可以按你的实际情况选择启用。
![](/skin/images/ndarrow.png)
猜你喜欢
![pbootcms后台编辑器ueditor自动过滤style内链样式的解决办法](/skin/images/default.jpg)
pbootcms后台编辑器ueditor自动过滤style内链样式的解决办法
![点击](/skin/images/watch.png)
![pbootcms禁止某个栏目的文章生成sitemap](/skin/images/default.jpg)
pbootcms禁止某个栏目的文章生成sitemap
![点击](/skin/images/watch.png)
![pbootcms实现产品详情内容自动区分电脑版和手机版](/skin/images/default.jpg)
pbootcms实现产品详情内容自动区分电脑版和手机版
![点击](/skin/images/watch.png)
![pbootcms按照文章ID排序](/skin/images/default.jpg)
pbootcms按照文章ID排序
![点击](/skin/images/watch.png)
![session文件夹自动清理时间从3天间隔修改为1天](/skin/images/default.jpg)
session文件夹自动清理时间从3天间隔修改为1天
![点击](/skin/images/watch.png)
![pbootcms独立手机端不绑定二级域名的方法](/skin/images/default.jpg)
pbootcms独立手机端不绑定二级域名的方法
![点击](/skin/images/watch.png)
![](/skin/images/info2.png)
HTML5在线教育培训课程网站模板
![HTML5在线教育培训课程网站模板](https://scpic.chinaz.net/files/pic/moban/202303/moban7142.jpg)
![](/skin/images/info2.png)
pbootcms列表序号从2、3、4或者其他数字开始
![pbootcms列表序号从2、3、4或者其他数字开始](/static/upload/image/20231203/1701537547102438.jpg)
![](/skin/images/info2.png)
HTML5婴幼儿早教启蒙机构网站模板
![HTML5婴幼儿早教启蒙机构网站模板](https://scpic.chinaz.net/files/pic/moban/202309/moban7476.jpg)
![](/skin/images/info2.png)
怎么判断pbootcms网站是否容易被黑?
![怎么判断pbootcms网站是否容易被黑?](/static/images/nopic.png)
![](/skin/images/info2.png)
pbootcms一个网站绑定多个域名,访问不同的域名显示不同的备案号码的方法
![pbootcms一个网站绑定多个域名,访问不同的域名显示不同的备案号码的方法](/static/images/nopic.png)
![](/skin/images/info2.png)
变现新途径!视频号“创作分成计划”上线 评论区广告来了
![变现新途径!视频号“创作分成计划”上线 评论区广告来了](https://i.zz5.net/images/article/2023/04/07/093758042.jpg)
![](/skin/images/info2.png)
织梦后台文档列表无法找到404错误问题
![织梦后台文档列表无法找到404错误问题](/static/images/nopic.png)
![](/skin/images/info2.png)
皮卡丘动态表情包gif素材必备,爱心动画代码下载
![皮卡丘动态表情包gif素材必备,爱心动画代码下载](/static/upload/image/20231029/1698582536209181.png)
![](/skin/images/info2.png)
Sqlite数据库删除数据后,文件大小不变问题
![Sqlite数据库删除数据后,文件大小不变问题](https://www.0536360.com/kindeditor/attached/image/20230513/20230513190752_21191.jpg)
![](/skin/images/info2.png)
pbootcms邮件通知同时发送到多个邮箱
![pbootcms邮件通知同时发送到多个邮箱](https://www.0536360.com/kindeditor/attached/image/20230426/20230426211914_94664.jpg)