PbootCms制作ajax無刷新加載列表內容

前言

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

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

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

友情提示

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

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

實現步驟

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

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

查看源碼打印代碼幫助

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

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

查看源碼打印代碼幫助

1<div class="list">

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

3<div class="title">[*list:title*]</div>

4<div class="desc">[*list:description*] </div>

5<hr>

6{*/pboot:list*}

7</div>

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

查看源碼打印代碼幫助

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

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

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

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

07var Num = 2;

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

10var Dom = jQuery(.list);

12//接下來寫在點擊按鈕（.more）的時候觸發事件

13jQuery(#More).on(click, function(){

15//先構建Api的地址，具體的Api地址參數，請參考官方手冊。

16var url = /api.php/list/3/page/ + Page + /num/ + Num;

18//開始Ajax提交請求，請求路徑就是Api接口

19jQuery.ajax({

20//請求類型

21type: POST,

22//請求地址

23url: url,

24//返回數據類型

25dataType: json,

26//請求參數，參考官方Api手冊

27data: {

28appid: {*pboot:appid*},

29timestamp: {*pboot:timestamp*},

30signature: {*pboot:signature*},

31},

32//請求成功

33success: function( response, status ){

34//定義Data變量為返回的數據

35var Data = response.data;

36if( response.code ){

37//獲取數據成功，進行循環，value就是文章對象

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

39//將內容append到列表

40var Html = <div class="title"> + value.title + </div><div class="desc"> + value.description + </div><hr>;

41Dom.append( Html );

42});

43//分頁+1，下次獲取下一頁的內容

44Page += 1;

45} else {

46//返回數據錯誤

47jQuery(#More).html(<span> + Data + </span>);

48}

49},

50//請求失敗

51error: function( xhr, status, error ){

52//返回數據異常

53console.log( error );

54}

55})

56})

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

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

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

查看源碼打印代碼幫助

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

02jQuery(window).scroll(function(){

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

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

07//可視窗口區域高度

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

10//頁面的高度

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

13//定義一個開關

14var load = true;

16//判斷：（窗口與頁面頂部距離 + 窗口高度） >= 頁面的高度（也就是滾動到頁面底部的時候），并且開關是開啟狀態，執行ajax加載內容

17if( ( WindowTop + WindowHeight ) >= DocHeight &AMP;& load == true ){

19//請求地址

20var url = /API.php/list/3/page/ + Page + /num/ + Num;

22//設置開關狀態為關閉，防止重復加載

23load = false;

25jQuery.ajax({

27//部分代碼省略

28......

30success: function( response, status ){

32var Data = response.data;

34if( response.code ){

36//獲取數據成功

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

38......

39});

41//設置開關狀態為開啟，進行下次加載

42load == true;

44//頁碼+1

45Page += 1;

47} else {

49//返回數據錯誤

50jQuery(#More).Html(<span> + Data + </span>);

52}

54},

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

58})

60}

62})

總結

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

加入收藏

標簽：

本文鏈接：http://www.373753.com/xinwendongtai/1939.html

上一篇： pbootcms模板如何調用時間時間格式大全

下一篇： PbootCms后臺登陸不顯示驗證碼【阿里云虛擬主機】

69久久夜色精品国产69乱青草_国产高清日韩_亚洲一二三四区不卡_亚洲国产成人av网

PbootCms制作ajax無刷新加載列表內容

前言

友情提示

實現步驟

總結