最新公告
  • 欢迎您光临尘梦网,我们提供建站技术教学,帮助用户实现从技能提升到技能应用的能力闭环。立即加入我们
  • PbootCMS使用技巧教程(一) – Ajax加载

    前段时间,群里有位同学问起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接口之后,获取数据更容易,使用更方便。

    尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    尘梦网 » PbootCMS使用技巧教程(一) – Ajax加载

    常见问题FAQ

    尘梦网是什么?
    尘梦网(itwork.ren)是互联网综合学习平台。尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    本站课程是否为1对1教学?
    本站为录播课程,可直接寻找对应课程观看,不定时会有直播课
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    免费下载或者会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供部分资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

    发表评论

    • 24350会员总数(位)
    • 367资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 337稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情