前段時(shí)間，群里有位同學(xué)問(wèn)起Ajax加載的問(wèn)題，這個(gè)不屬于模板制作系列教程的內(nèi)容，因此單獨(dú)再出一個(gè)使用技巧系列的教程。
該系列會(huì)寫一些pbootcms模板在使用過(guò)程中碰到的一些問(wèn)題，以及問(wèn)題的解決方案。
大家也可以給我反饋一些問(wèn)題，有空的時(shí)候我會(huì)選一些寫出來(lái)放在這個(gè)系列的教程里面。
Ajax無(wú)刷新加載內(nèi)容，看起來(lái)高大上一點(diǎn)，但是對(duì)SEO是不太友好的，所以在使用的時(shí)候應(yīng)該有個(gè)取舍。
由于PbootCMS的Api接口的存在，在PbootCMS上實(shí)現(xiàn)Ajax加載還是比較方便的。
一、點(diǎn)擊更多按鈕加載內(nèi)容
1、首先，添加一個(gè)按鈕用來(lái)觸發(fā)事件。
<button class="more" type="submit">點(diǎn)擊加載更多</button> |
<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>
|
//先定義一些基本的內(nèi)容
//Page就是第幾頁(yè)，由當(dāng)前頁(yè){page:current} + 1，就是第二頁(yè)，parseInt確保該數(shù)值是Int類型。
var Page = parseInt('{page:current}') + 1;
//Num就是每頁(yè)幾條信息，因?yàn)榱斜砟J(rèn)顯示的是2條，所以這里設(shè)為2，結(jié)合上面的第二頁(yè)實(shí)際上就是從第三條信息開始讀取。
var Num = 2;
//定義內(nèi)容的Dom位置，也就是讀取出來(lái)的內(nèi)容要添加到哪個(gè)div里面去。
var Dom = jQuery('.list');
//接下來(lái)寫在點(diǎn)擊按鈕（'.more'）的時(shí)候觸發(fā)事件
jQuery('#More').on('click', function(){
//先構(gòu)建Api的地址，具體的Api地址參數(shù)，請(qǐng)參考官方手冊(cè)。
var url = '/api.php/list/3/page/' + Page + '/num/' + Num;
//開始Ajax提交請(qǐng)求，請(qǐng)求路徑就是Api接口
jQuery.ajax({
//請(qǐng)求類型
type: 'POST',
//請(qǐng)求地址
url: url,
//返回?cái)?shù)據(jù)類型
dataType: 'json',
//請(qǐng)求參數(shù)，參考官方Api手冊(cè)
data: {
appid: '{*pboot:appid*}',
timestamp: '{*pboot:timestamp*}',
signature: '{*pboot:signature*}',
},
//請(qǐng)求成功
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 );
});
//分頁(yè)+1，下次獲取下一頁(yè)的內(nèi)容
Page += 1;
} else {
//返回?cái)?shù)據(jù)錯(cuò)誤
jQuery('#More').html('<span>' + Data + '</span>');
}
},
//請(qǐng)求失敗
error: function( xhr, status, error ){
//返回?cái)?shù)據(jù)異常
console.log( error );
}
})
})
|
二、頁(yè)面滑動(dòng)到底部加載更多文章
原理同上，只不過(guò)改變一下事件，原來(lái)是點(diǎn)擊按鈕觸發(fā)的，改成滾動(dòng)監(jiān)聽。
//使用jQuery的scroll()方法來(lái)監(jiān)聽頁(yè)面滾動(dòng)
jQuery(window).scroll(function(){
//當(dāng)前窗口和頁(yè)面頂部的距離
var WindowTop = jQuery(window).scrollTop();
//可視窗口區(qū)域高度
var WindowHeight = jQuery(window).outerHeight();
//頁(yè)面的高度
var DocHeight = jQuery(document).height();
//定義一個(gè)開關(guān)
var load = true;
//判斷：（窗口與頁(yè)面頂部距離 + 窗口高度） >= 頁(yè)面的高度（也就是滾動(dòng)到頁(yè)面底部的時(shí)候），并且開關(guān)是開啟狀態(tài)，執(zhí)行ajax加載內(nèi)容
if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){
//請(qǐng)求地址
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;
//頁(yè)碼+1
Page += 1;
} else {
//返回?cái)?shù)據(jù)錯(cuò)誤
jQuery('#More').html('<span>' + Data + '</span>');
}
},
error:function( xhr, status, error ){ ...... }
})
}
})
|
Ajax并沒(méi)有想象中的難度那么大，特別是有了PbootCMS的Api接口之后，獲取數(shù)據(jù)更容易，使用更方便。
