导读:建站知识建站知识很久没写教程了，前些天有同学问页面上怎么做点击加载更多的效果。这个就是常说的Ajax无刷新分页了。 实现思路 PbootCms 自带了API接口，我们可以通过这网站建设公司网站建设制作。

很久没写教程了，前些天有同学问页面上怎么做点击加载更多的效果。这个就是常说的Ajax无刷新分页了。 实现思路 PbootCms 自带了API接口，我们可以通过这个API接口http://域名/api.php/list/调取分页所需的数据。 我建议这种分页，不要一上来就全部使用Ajax获取数据，因为Ajax是不会被百度收录的。 我建议的做法是，在列表页先使用模板标签输出一些数据。例如： div?class="newslist"????{pboot:list?num=6}????li????????a?hre […]

很久没写教程了，前些天有同学问页面上怎么做点击加载更多的效果。这个就是常说的Ajax无刷新分页了。

实现思路

PbootCms自带了API接口，我们可以通过这个API接口http://域名/api.php/list/ 调取分页所需的数据。

我建议这种分页，不要一上来就全部使用Ajax获取数据，因为Ajax是不会被百度收录的。

我建议的做法是，在列表页先使用模板标签输出一些数据。例如：

<div?class="newslist"> ????{pboot:list?num=6} ????<li> ????????<a?href="[list:link]">[list:title]</a> ????</li> ????{/pboot:list} ????<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(?网站seo优化诊断工具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>

关键词标签: 分页 中用