久久久久久久久久久亚洲,日本高清无遮挡,国产免费黄色

PbootCMS列表內容ajax無刷新加載數據？前段時間，群里有位同學問起Ajax加載的問題，這個不屬于模板制作系列教程的內容，因此單獨再出一個使用技巧系列的教程。

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

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

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

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

使用方法

一、點擊更多按鈕加載內容

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

<button?class="more"?type="submit">點擊加載更多</button>

2、添加默認顯示的頁面內容（只是演示，結構我就隨意寫了）

<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

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

//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?=?'<div?class="title">'?+?value.title?+?'</div><div?class="desc">'?+?value.description?+?'</div><hr>';
????????????????????Dom.append(?Html?);
????????????????});
????????????????//分頁+1，下次獲取下一頁的內容
????????????????Page?+=?1;
????????????}?else?{
????????????????//返回數據錯誤
????????????????jQuery('#More').html('<span>'?+?Data?+?'</span>');
????????????}
????????},
????????//請求失敗
????????error:?function(?xhr,?status,?error?){
????????????//返回數據異常
????????????console.log(?error?);
????????}
????})
})

完成，點擊一下加載更多，頁面就會無刷新加載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('<span>'?+?Data?+?'</span>');
????????????????????
????????????????}
????????????????
????????????},
????????????
????????????error:function(?xhr,?status,?error?){?......?}
????????????
????????})
????????
????}
????
})