导读:建站知识建站知识很久没写教程了，前些天有同学问页面上怎么做点击加载更多的效果。这个就是常说的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>

关键词标签: 分页 中用