<track id="o046z"><strike id="o046z"></strike></track>
    AB模板網(www.rjphb.com)專注企業網站模板制作,包括企業pbootcms網站模板,靜態網頁模板,網站源碼下載,HTML網站模板等等。+ 收藏我們

    網站模板

    網站模板搜索

    注冊

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

    AB模板網 / 2021-12-06

    前言

    前段時間,群里有位同學問起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 ){ ...... }
                
            })
            
        }
        
    })

    總結

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

    文章搜集與網絡,如有侵權請聯系本站,轉載請說明出處:http://www.rjphb.com/pbootcmsjs/9735.html

    有問題可以加入網站技術QQ群一起交流學習

    ☉首先聲明,只要是我們的vip會員全站所有資源均可以免費下載,不做任何限制(了解更多)

    ☉本站的源碼不會像其它下載站一樣植入大量的廣告。

    ☉本站提供的網站源碼,都是做好測試好發布的,均可放心使用。

    ☉本站提供的網站源碼,均帶數據及演示地址?梢栽谌我辉创a詳情頁查看演示地址。

    ☉為了vip利益的最大化,我們還提供了vip贈品(了解更多

    ☉如有其他問題,請加網站客服QQ(9490489)進行交流。

    首頁 pbootcms模板 html模板 會員中心
    午夜A级理论片在线播放HB