<i id="tzb7r"><ruby id="tzb7r"><font id="tzb7r"></font></ruby></i>

      <output id="tzb7r"><strike id="tzb7r"><cite id="tzb7r"></cite></strike></output><ol id="tzb7r"><var id="tzb7r"><b id="tzb7r"></b></var></ol>

      <i id="tzb7r"><output id="tzb7r"><var id="tzb7r"></var></output></i>

          十五年風雨路 · 一心鑄精品

          一個官網 留一件精品 做一個項目 樹一塊樣板

          網站建設中pbootcms制作ajax無刷新加載列表內容解決辦法,超簡單的

          上一篇我們提到: 有網友來問pbootcms網站建設的時候想用tags循環出來的tag標簽如何才能顯示每個的數量,去翻看官方手冊就會發現PbootCMS的tags標簽循環默認不帶單個tag的數量調用,這種情況就只能自己去二開支持了,pbootcms網站建設的下面來講下如何操作tag標簽文章數量。教程步驟打開修改文件:/apps/home/controller/ParserControl

          接下來我們進入今天的正文:
          2022-03-15 09:39:21

          前段時間,群里有位同學問起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//先定義一些基本的內容
          02
          03//Page就是第幾頁,由當前頁{page:current} + 1,就是第二頁,parseInt確保該數值是Int類型。
          04var Page = parseInt('{page:current}') + 1;
          05
          06//Num就是每頁幾條信息,因為列表默認顯示的是2條,所以這里設為2,結合上面的第二頁實際上就是從第三條信息開始讀取。
          07var Num  = 2;
          08
          09//定義內容的Dom位置,也就是讀取出來的內容要添加到哪個div里面去。
          10var Dom  = jQuery('.list');
          11
          12//接下來寫在點擊按鈕('.more')的時候觸發事件
          13jQuery('#More').on('click'function(){
          14
          15    //先構建Api的地址,具體的Api地址參數,請參考官方手冊。
          16    var url = '/api.php/list/3/page/' + Page + '/num/' + Num;
          17
          18    //開始Ajax提交請求,請求路徑就是Api接口
          19    jQuery.ajax({
          20        //請求類型
          21        type'POST',
          22        //請求地址
          23        url: url,
          24        //返回數據類型
          25        dataType: 'json',
          26        //請求參數,參考官方Api手冊
          27        data: {
          28            appid: '{*pboot:appid*}',
          29            timestamp: '{*pboot:timestamp*}',
          30            signature: '{*pboot:signature*}',
          31        },
          32        //請求成功
          33        success: function( response, status ){
          34            //定義Data變量為返回的數據
          35            var Data = response.data;
          36            if( response.code ){
          37                //獲取數據成功,進行循環,value就是文章對象
          38                jQuery.each( Data, function( index, value ){
          39                    //將內容append到列表
          40                    var Html = '<div class="title">' + value.title + '</div><div class="desc">' + value.description + '</div><hr>';
          41                    Dom.append( Html );
          42                });
          43                //分頁+1,下次獲取下一頁的內容
          44                Page += 1;
          45            else {
          46                //返回數據錯誤
          47                jQuery('#More').html('<span>' + Data + '</span>');
          48            }
          49        },
          50        //請求失敗
          51        error: function( xhr, status, error ){
          52            //返回數據異常
          53            console.log( error );
          54        }
          55    })
          56})


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

           

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

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

          01//使用jQuery的scroll()方法來監聽頁面滾動
          02jQuery(window).scroll(function(){
          03
          04    //當前窗口和頁面頂部的距離
          05    var WindowTop = jQuery(window).scrollTop();
          06
          07    //可視窗口區域高度
          08    var WindowHeight = jQuery(window).outerHeight();
          09
          10    //頁面的高度
          11    var DocHeight = jQuery(document).height();
          12
          13    //定義一個開關
          14    var load = true;
          15
          16    //判斷:(窗口與頁面頂部距離 + 窗口高度) >= 頁面的高度(也就是滾動到頁面底部的時候),并且開關是開啟狀態,執行ajax加載內容
          17    if( ( WindowTop + WindowHeight ) >= DocHeight && load == true ){
          18
          19        //請求地址
          20        var url = '/api.php/list/3/page/' + Page + '/num/' + Num;
          21
          22        //設置開關狀態為關閉,防止重復加載
          23        load = false;
          24
          25        jQuery.ajax({
          26
          27            //部分代碼省略
          28            ......
          29
          30            success: function( response, status ){
          31
          32                var Data = response.data;
          33
          34                if( response.code ){
          35
          36                    //獲取數據成功
          37                    jQuery.each( Data, function( index, value ){
          38                        ......
          39                    });
          40
          41                    //設置開關狀態為開啟,進行下次加載
          42                    load == true;
          43
          44                    //頁碼+1
          45                    Page += 1;
          46
          47                else {
          48
          49                    //返回數據錯誤
          50                    jQuery('#More').html('<span>' + Data + '</span>');
          51
          52                }
          53
          54            },
          55
          56            error:function( xhr, status, error ){ ...... }
          57
          58        })
          59
          60    }
          61
          62})


          總結

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


          二維碼

          掃一掃,瀏覽關注本文

          主營業務

          • 高端網站定制
          • 高端網站定制
          • 高端網站定制
          • 高端網站定制
          • 高端網站定制
          • 高端網站定制

          TAGS

          隨機案例

          • 明霆基礎工程網站建設

            明霆基礎工程網站建設

          • 修柏建筑幕墻工程網站建設

            修柏建筑幕墻工程網站建設

          • 新文必生印務、印刷網站建設、包裝網站建設

            新文必生印務、印刷網站建設、包裝網站建設

          • 五菱電動觀光車網站建設

            五菱電動觀光車網站建設

          • 阿杰美容美發培訓網站建設

            阿杰美容美發培訓網站建設

          • 高鐵乘務/成都職業學校/四川高鐵職業技術學校/網站建設

            高鐵乘務/成都職業學校/四川高鐵職業技術學校/···

          • 康偉管業/PP超靜音排水管材/網站建設

            康偉管業/PP超靜音排水管材/網站建設

          • 功夫螞蟻餐飲火鍋加盟網站建設

            功夫螞蟻餐飲火鍋加盟網站建設

          案例展示 / CASE

          晉沙匯川服裝定制網站建設

          查看詳情

          蜀豐食品包裝網站建設

          實力讓我們引領行業為您鎖住健康,讓食品更安全,讓生活更健康!成都市都江堰市蜀豐食品包裝有限公司成立于2014年初,是一家集研···

          查看詳情

          功夫螞蟻餐飲火鍋加盟網站建設

          功夫螞蟻是一家專注于麻辣燙,火鍋,串串香行業的優質餐飲連鎖加盟公司。提供火鍋串串香加盟免費指導、火鍋加盟店選址等,讓您在加盟···

          查看詳情

          嬰之皇/孕嬰/母嬰連鎖加盟/網站建設

          查看詳情

          康偉管業/PP超靜音排水管材/網站建設

          查看詳情

          宏冠服飾網站建設

          查看詳情

          新文必生印務、印刷網站建設、包裝網站建設

          成都印刷網站建設,成都印刷廠網站設計,成都畫冊印刷網站制作,成都畫冊制作網站建設,成都印刷廠家網站建設,四川印刷網站建設,四川···

          查看詳情

          伊卡璐服飾/服裝網站建設?

          網站以定制,訂制服裝網站建設為主的關鍵詞,網站全新的以HTML5框架定制設計,整站目錄清新明了,利于網站優化,搜索引擎蜘蛛爬行···

          查看詳情

          阿杰美容美發培訓網站建設

          查看詳情

          高鐵乘務/成都職業學校/四川高鐵職業技術學校/網站建設

          查看詳情

          明霆基礎工程網站建設

          查看詳情

          天翊裝飾網站建設

          天翊裝飾公司網站以html5響應式一體化設計制作,高端大氣上次,關鍵詞:裝修公司網站建設,裝飾公司網站建設,成都裝修公司網站建···

          查看詳情
          ?

          聯系我們 / CONTACT US

          • 四川省成都市金牛區五福橋東路229號龍湖北城天街28棟903
          • 服務熱線:028-86088588  18080432432(微信同號)
          • 總機:028-62322623-0
          • QQ:3575114  107086147

          掃碼訪問手機網站

          版權所有 Copyright ? 2007-2022 四川冠辰科技開發有限公司    川公安網備案:51010602001006號     

          地址:四川省成都市金牛區五福橋東路229號龍湖北城天街28棟903  蜀ICP備11012605號-1

          始于2007年,十五年品牌網站建設,值得信賴!  xml地圖txt地圖

          欧美日韩国产精品自在自线

            <i id="tzb7r"><ruby id="tzb7r"><font id="tzb7r"></font></ruby></i>

              <output id="tzb7r"><strike id="tzb7r"><cite id="tzb7r"></cite></strike></output><ol id="tzb7r"><var id="tzb7r"><b id="tzb7r"></b></var></ol>

              <i id="tzb7r"><output id="tzb7r"><var id="tzb7r"></var></output></i>