
PbootCms自帶了API接口,我們可以通過這個(gè)API接口http://域名/api.php/list/ 調(diào)取分頁所需的數(shù)據(jù)。
我建議這種分頁,不要一上來就全部使用Ajax獲取數(shù)據(jù),因?yàn)锳jax是不會(huì)被百度收錄的。
我建議的做法是,在列表頁先使用模板標(biāo)簽輸出一些數(shù)據(jù)。例如:
<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條數(shù)據(jù),讓搜索引擎醉少能抓取到醉新的6條文章。
然后再使用Ajax去調(diào)取剩余的新聞內(nèi)容,實(shí)現(xiàn)點(diǎn)擊加載更多的效果。
下面就是核心AJAX調(diào)取API數(shù)據(jù)部分代碼
<script>
$(function(){
var Page = 1;
// 每頁展示12個(gè)
var Num = 6;
$(document).on('click','.loadmore',function(){
// 頁數(shù)
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 ){
//獲取數(shù)據(jù)成功
var Html = '';
jQuery.each( Data, function( index, value ){
//構(gòu)建HTML
Html += '<li>';
Html += ' <a href="'+ value.contentlink +'">'+ value.title +'</a>';
Html += '</li>';
});
// 為了測試,延遲1秒加載
setTimeout(function(){
// 插入數(shù)據(jù)到頁面,放到醉后面
$('.newslist ul').append(Html);
},500);
}else{
$('.loadmore').slideUp();
}
},
error: function(xhr, type){
console.log('Ajax error!');
}
});
});
});
</script>簡單解釋一下這個(gè)代碼,從第二頁開始讀取,每次讀取6條。為什么從第二頁開始讀???因?yàn)榍懊嫖覀円呀?jīng)在模板里輸出6條數(shù)據(jù)啦。
請注意在后臺(tái)開啟WebAPI,如下圖。

其中API強(qiáng)制認(rèn)證,可以按你的實(shí)際情況選擇啟用。
到此教程結(jié)束。
版權(quán)聲明:本文除特別說明外均由博主原創(chuàng),尊重共享,歡迎轉(zhuǎn)載!轉(zhuǎn)載請注明來源。https://www.phpjin.com/cms/41.html