PbootCMS列表內容ajax無刷新加載數據

點擊加載更多

????{pboot:list?scode=3?num=2}
????[list:title]

//先定義一些基本的內容

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

//Num就是每頁幾條信息，因為列表默認顯示的是2條，所以這里設為2，結合上面的第二頁實際上就是從第三條信息開始讀取。
var?Num??=?2;

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

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

????//先構建Api的地址，具體的Api地址參數，請參考官方手冊。
????var?url?=?'/api.php/list/3/page/'?+?Page?+?'/num/'?+?Num;
????
????//開始Ajax提交請求，請求路徑就是Api接口
????jQuery.ajax({
????????//請求類型
????????type:?'POST',?
????????//請求地址
????????url:?url,
????????//返回數據類型
????????dataType:?'json',
????????//請求參數，參考官方Api手冊
????????data:?{
????????????appid:?'{pboot:appid}',
????????????timestamp:?'{pboot:timestamp}',
????????????signature:?'{pboot:signature}',
????????},
????????//請求成功
????????success:?function(?response,?status?){
????????????//定義Data變量為返回的數據
????????????var?Data?=?response.data;
????????????if(?response.code?){
????????????????//獲取數據成功，進行循環，value就是文章對象
????????????????jQuery.each(?Data,?function(?index,?value?){
????????????????????//將內容append到列表
????????????????????var?Html?=?''?+?value.title?+?'

完成，點擊一下加載更多，頁面就會無刷新加載2篇文章了。

二、頁面滑動到底部加載更多文章

原理同上，只不過改變一下事件，原來是點擊按鈕觸發的，改成滾動監聽。

//使用jQuery的scroll()方法來監聽頁面滾動
jQuery(window).scroll(function(){

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

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