前言

前段時間，群里有位同學問起Ajax加載的問題，這個不屬于模板制作系列教程的內(nèi)容，因此單獨再出一個使用技巧系列的教程。

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

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

友情提示

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

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

實現(xiàn)步驟

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

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

"more" type="submit">點擊加載更多

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

"list">

{*pboot:list scode=3* num=2}

"title">[*list:title*]

"desc">[*list:description*]

{*/pboot:list*}

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

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

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

var Page = parseInt('{page:current}') + 1;

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

var Num  = 2;

//定義內(nèi)容的Dom位置，也就是讀取出來的內(nèi)容要添加到哪個div里面去。

var Dom  = jQuery('.list');

//接下來寫在點擊按鈕（'.more'）的時候觸發(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,

//返回數(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ù)成功，進行循環(huán)，value就是文章對象

jQuery.each( Data, function( index, value ){

//將內(nèi)容append到列表

var Html = '

' + value.title + '

' + value.description + '

';

Dom.append( Html );

});

//分頁+1，下次獲取下一頁的內(nèi)容

Page += 1;

} else {

//返回數(shù)據(jù)錯誤

jQuery('#More').html('' + Data + '');

}

},

//請求失敗

error: function( xhr, status, error ){

//返回數(shù)據(jù)異常

console.log( error );

}

})

})

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

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

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

//使用jQuery的scroll()方法來監(jiān)聽頁面滾動

jQuery(window).scroll(function(){

//當前窗口和頁面頂部的距離

var WindowTop = jQuery(window).scrollTop();

//可視窗口區(qū)域高度

var WindowHeight = jQuery(window).outerHeight();

//頁面的高度

var DocHeight = jQuery(document).height();

//定義一個開關(guān)

var load = true;

//判斷：（窗口與頁面頂部距離 + 窗口高度） >= 頁面的高度（也就是滾動到頁面底部的時候），并且開關(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)為開啟，進行下次加載

load == true;

//頁碼+1

Page += 1;

} else {

//返回數(shù)據(jù)錯誤

jQuery('#More').html('' + Data + '');

}

},

error:function( xhr, status, error ){ ...... }

})

}

})

總結(jié)

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