PbootCMS列表內(nèi)容ajax無刷新加載數(shù)據(jù)？前段時(shí)間，群里有位同學(xué)問起Ajax加載的問題，這個(gè)不屬于模板制作系列教程的內(nèi)容，因此單獨(dú)再出一個(gè)使用技巧系列的教程。

該系列會(huì)寫一些pbootcms在使用過程中碰到的一些問題，以及問題的解決方案。

大家也可以給我反饋一些問題，有空的時(shí)候我會(huì)選一些寫出來放在這個(gè)系列的教程里面。

Ajax無刷新加載內(nèi)容，看起來高大上一點(diǎn)，但是對(duì)SEO是不太友好的，所以在使用的時(shí)候應(yīng)該有個(gè)取舍。

由于PbootCMS的Api接口的存在，在PbootCMS上實(shí)現(xiàn)Ajax加載還是比較方便的。

使用方法

一、點(diǎn)擊更多按鈕加載內(nèi)容

1、首先，添加一個(gè)按鈕用來觸發(fā)事件。

<button?class="more"?type="submit">點(diǎn)擊加載更多</button>

2、添加默認(rèn)顯示的頁面內(nèi)容（只是演示，結(jié)構(gòu)我就隨意寫了）

<div?class="list">
????{pboot:list?scode=3?num=2}
????<div?class="title">[list:title]</div>
????<div?class="desc">[list:description]</div>
????<hr>
????{/pboot:list}
</div>

3、js代碼部分，先引入jQuery

//先定義一些基本的內(nèi)容

//Page就是第幾頁，由當(dāng)前頁{page:current}?+?1，就是第二頁，parseInt確保該數(shù)值是Int類型。
var?Page?=?parseInt('{page:current}')?+?1;

//Num就是每頁幾條信息，因?yàn)榱斜砟J(rèn)顯示的是2條，所以這里設(shè)為2，結(jié)合上面的第二頁實(shí)際上就是從第三條信息開始讀取。
var?Num??=?2;

//定義內(nèi)容的Dom位置，也就是讀取出來的內(nèi)容要添加到哪個(gè)div里面去。
var?Dom??=?jQuery('.list');

//接下來寫在點(diǎn)擊按鈕（'.more'）的時(shí)候觸發(fā)事件
jQuery('#More').on('click',?function(){

????//先構(gòu)建Api的地址，具體的Api地址參數(shù)，請參考官方手冊。
????var?url?=?'/api.php/list/3/page/'?+?Page?+?'/num/'?+?Num;
????
????//開始Ajax提交請求，請求路徑就是Api接口
????jQuery.ajax({
????????//請求類型
????????type:?'POST',?
????????//請求地址
????????url:?url,
????????//返回?cái)?shù)據(jù)類型
????????dataType:?'json',
????????//請求參數(shù)，參考官方Api手冊
????????data:?{
????????????appid:?'{pboot:appid}',
????????????timestamp:?'{pboot:timestamp}',
????????????signature:?'{pboot:signature}',
????????},
????????//請求成功
????????success:?function(?response,?status?){
????????????//定義Data變量為返回的數(shù)據(jù)
????????????var?Data?=?response.data;
????????????if(?response.code?){
????????????????//獲取數(shù)據(jù)成功，進(jìn)行循環(huán)，value就是文章對(duì)象
????????????????jQuery.each(?Data,?function(?index,?value?){
????????????????????//將內(nèi)容append到列表
????????????????????var?Html?=?'<div?class="title">'?+?value.title?+?'</div><div?class="desc">'?+?value.description?+?'</div><hr>';
????????????????????Dom.append(?Html?);
????????????????});
????????????????//分頁+1，下次獲取下一頁的內(nèi)容
????????????????Page?+=?1;
????????????}?else?{
????????????????//返回?cái)?shù)據(jù)錯(cuò)誤
????????????????jQuery('#More').html('<span>'?+?Data?+?'</span>');
????????????}
????????},
????????//請求失敗
????????error:?function(?xhr,?status,?error?){
????????????//返回?cái)?shù)據(jù)異常
????????????console.log(?error?);
????????}
????})
})

完成，點(diǎn)擊一下加載更多，頁面就會(huì)無刷新加載2篇文章了。

二、頁面滑動(dòng)到底部加載更多文章

原理同上，只不過改變一下事件，原來是點(diǎn)擊按鈕觸發(fā)的，改成滾動(dòng)監(jiān)聽。

//使用jQuery的scroll()方法來監(jiān)聽頁面滾動(dòng)
jQuery(window).scroll(function(){

????//當(dāng)前窗口和頁面頂部的距離
????var?WindowTop?=?jQuery(window).scrollTop();
????
????//可視窗口區(qū)域高度
????var?WindowHeight?=?jQuery(window).outerHeight();
????
????//頁面的高度
????var?DocHeight?=?jQuery(document).height();
????
????//定義一個(gè)開關(guān)
????var?load?=?true;
????
????//判斷：（窗口與頁面頂部距離?+?窗口高度）?>=?頁面的高度（也就是滾動(dòng)到頁面底部的時(shí)候），并且開關(guān)是開啟狀態(tài)，執(zhí)行ajax加載內(nèi)容
????if(?(?WindowTop?+?WindowHeight?)?>=?DocHeight?&&?load?==?true?){
????
????????//請求地址
????????var?url?=?'/api.php/list/3/page/'?+?Page?+?'/num/'?+?Num;
????????
????????//設(shè)置開關(guān)狀態(tài)為關(guān)閉，防止重復(fù)加載
????????load?=?false;
????????
????????jQuery.ajax({
????????
????????????//部分代碼省略
????????????......
????????????
????????????success:?function(?response,?status?){
????????????????
????????????????var?Data?=?response.data;
????????????????
????????????????if(?response.code?){
????????????????????
????????????????????//獲取數(shù)據(jù)成功
????????????????????jQuery.each(?Data,?function(?index,?value?){
????????????????????????......
????????????????????});
????????????????????
????????????????????//設(shè)置開關(guān)狀態(tài)為開啟，進(jìn)行下次加載
????????????????????load?==?true;
????????????????????
????????????????????//頁碼+1
????????????????????Page?+=?1;
????????????????????
????????????????}?else?{
????????????????????
????????????????????//返回?cái)?shù)據(jù)錯(cuò)誤
????????????????????jQuery('#More').html('<span>'?+?Data?+?'</span>');
????????????????????
????????????????}
????????????????
????????????},
????????????
????????????error:function(?xhr,?status,?error?){?......?}
????????????
????????})
????????
????}
????
})

總結(jié)：Ajax并沒有想象中的難度那么大，特別是有了PbootCMS的Api接口之后，獲取數(shù)據(jù)更容易，使用更方便。

云部落資源網(wǎng)普通

打賞 收藏 海報(bào) 鏈接