前段時間，群里有位同學問起Ajax加載的問題，這個不屬于模板制作系列教程的內容，因此單獨再出一個使用技巧系列的教程。
該系列會寫一些pbootcms模板在使用過程中碰到的一些問題，以及問題的解決方案。
大家也可以給我反饋一些問題，有空的時候我會選一些寫出來放在這個系列的教程里面。
友情提示
Ajax無刷新加載內容，看起來高大上一點，但是對SEO是不太友好的，所以在使用的時候應該有個取舍。
由于PbootCMS的Api接口的存在，在PbootCMS上實現Ajax加載還是比較方便的。
實現步驟
一、點擊更多按鈕加載內容
1、首先，添加一個按鈕用來觸發事件。
1 | <button class="more" type="submit">點擊加載更多</button> |
|
2、添加默認顯示的頁面內容（只是演示，結構我就隨意寫了）
2 | {*pboot:list scode=3* num=2} |
3 | <div class="title">[*list:title*]</div> |
4 | <div class="desc">[*list:description*] </div> |
|
3、js代碼部分，先引入jQuery
03 | //Page就是第幾頁，由當前頁{page:current} + 1，就是第二頁，parseInt確保該數值是Int類型。 |
04 | var Page = parseInt('{page:current}') + 1; |
06 | //Num就是每頁幾條信息，因為列表默認顯示的是2條，所以這里設為2，結合上面的第二頁實際上就是從第三條信息開始讀取。 |
09 | //定義內容的Dom位置，也就是讀取出來的內容要添加到哪個div里面去。 |
10 | var Dom = jQuery('.list'); |
12 | //接下來寫在點擊按鈕（'.more'）的時候觸發事件 |
13 | jQuery('#More').on('click', function(){ |
15 | //先構建Api的地址，具體的Api地址參數，請參考官方手冊。 |
16 | var url = '/api.php/list/3/page/' + Page + '/num/' + Num; |
18 | //開始Ajax提交請求，請求路徑就是Api接口 |
28 | appid: '{*pboot:appid*}', |
29 | timestamp: '{*pboot:timestamp*}', |
30 | signature: '{*pboot:signature*}', |
33 | success: function( response, status ){ |
35 | var Data = response.data; |
37 | //獲取數據成功，進行循環，value就是文章對象 |
38 | jQuery.each( Data, function( index, value ){ |
40 | var Html = '<div class="title">' + value.title + '</div><div class="desc">' + value.description + '</div><hr>'; |
47 | jQuery('#More').html('<span>' + Data + '</span>'); |
51 | error: function( xhr, status, error ){ |
|
完成，點擊一下加載更多，頁面就會無刷新加載2篇文章了。
二、頁面滑動到底部加載更多文章
原理同上，只不過改變一下事件，原來是點擊按鈕觸發的，改成滾動監聽。
01 | //使用jQuery的scroll()方法來監聽頁面滾動 |
02 | jQuery(window).scroll(function(){ |
05 | var WindowTop = jQuery(window).scrollTop(); |
08 | var WindowHeight = jQuery(window).outerHeight(); |
11 | var DocHeight = jQuery(document).height(); |
16 | //判斷：（窗口與頁面頂部距離 + 窗口高度） >= 頁面的高度（也就是滾動到頁面底部的時候），并且開關是開啟狀態，執行ajax加載內容 |
17 | if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){ |
20 | var url = '/api.php/list/3/page/' + Page + '/num/' + Num; |
30 | success: function( response, status ){ |
32 | var Data = response.data; |
37 | jQuery.each( Data, function( index, value ){ |
50 | jQuery('#More').html('<span>' + Data + '</span>'); |
56 | error:function( xhr, status, error ){ ...... } |
|
總結
Ajax并沒有想象中的難度那么大，特別是有了PbootCMS的Api接口之后，獲取數據更容易，使用更方便。
掃一掃，瀏覽關注本文
川公安網備案：51010602001006號 
