導讀:建站知識建站知識很久沒寫教程了，前些天有同學問頁面上怎么做點擊加載更多的效果。這個就是常說的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>

關鍵詞標簽: 分頁 中用