PbootCms自帶了API接口,我們可以通過這個API接口http://域名/api.php/list/ 調(diào)取分頁所需的數(shù)據(jù)。
我建議這種分頁,不要一上來就全部使用Ajax獲取數(shù)據(jù),因為Ajax是不會被百度收錄的。
我建議的做法是,在列表頁先使用模板標簽輸出一些數(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)容,實現(xiàn)點擊加載更多的效果。
下面就是核心AJAX調(diào)取API數(shù)據(jù)部分代碼
<script> $(function(){ var Page = 1; // 每頁展示12個 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>
簡單解釋一下這個代碼,從第二頁開始讀取,每次讀取6條。為什么從第二頁開始讀?。恳驗榍懊嫖覀円呀?jīng)在模板里輸出6條數(shù)據(jù)啦。
請注意在后臺開啟WebAPI,如下圖。
其中API強制認證,可以按你的實際情況選擇啟用。
到此教程結(jié)束。
版權(quán)聲明:本文除特別說明外均由博主原創(chuàng),尊重共享,歡迎轉(zhuǎn)載!轉(zhuǎn)載請注明來源。https://www.phpjin.com/cms/41.html