官網(wǎng)上發(fā)的原始版本,特別整理一下重新發(fā)布。希望對大家有所作用
弟一步: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 第二步: <!------------定義內(nèi)容的Dom位置-----------------> <div class="mylist"> {pboot:list num=2 order='sorting asc'} <div class="title"><a href="[list:link]">[list:title]</a></div> <div class="desc">[list:description]</div> <hr> {/pboot:list} </div> 第三步: <button id="More" type="submit">點擊加載更多</button> <script> //先定義一些基本的內(nèi)容 //Page就是第幾頁,由當前頁0 + 1,就是第二頁,parseInt確保該數(shù)值是Int類型。 var Page = parseInt('0') + 1; //Num就是每頁幾條信息,因為列表默認顯示的是2條,所以這里設(shè)為2,結(jié)合上面的第二頁實際上就是從第三條信息開始讀取。 var Num = 10; //定義內(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/2/page/' + Page + '/num/' + Num; //開始Ajax提交請求,請求路徑就是Api接口 jQuery.ajax({ //請求類型 type: 'POST', //請求地址 url: url, //返回數(shù)據(jù)類型 dataType: 'json', //請求參數(shù),參考官方Api手冊,在站內(nèi)使用以下參數(shù)會自動獲取 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 ){ //獲取一些數(shù)據(jù) var Article_Url = '/index.php/content/' + value.id, Article_Date = value.date.split(' ')[0]; //將內(nèi)容append到列表 var Html = '<div class="title"><a href="' + Article_Url + '">' + value.title + '</a></div><div class="desc">' + value.description + '</div><hr>'; //在原本的數(shù)據(jù)列表后面添加新的數(shù)據(jù) Dom.append( Html ); }); //分頁+1,下次獲取下一頁的內(nèi)容 Page += 1; } else { //返回數(shù)據(jù)錯誤 jQuery('#More').html('<span>' + Data + '</span>'); } }, //請求失敗 error: function( xhr, status, error ){ //返回數(shù)據(jù)異常 console.log( error ); } }) }) </script>