欢迎来到路由器窝!
用PbootCms API接口实现Ajax无刷新分页 点击加载更多

用PbootCms API接口实现Ajax无刷新分页 点击加载更多

浏览次数:

作者: 小编

信息来源:

更新日期: 2022-06-17 10:22

文章简介

PbootCms自带了API接口,我们可以通过这个API接口http://域名/api.php/list/ 调取分页所需的数据。我建议这种分页,不要一上来就全部使用Ajax获取数据,因为Ajax是不会被百度收录的。我建议的做法是,在列表页先使用模板标

  • 正文开始
  • 相关文章

PbootCms自带了API接口,我们可以通过这个API接口http://域名/api.php/list/ 调取分页所需的数据。

我建议这种分页,不要一上来就全部使用Ajax获取数据,因为Ajax是不会被百度收录的。

我建议的做法是,在列表页先使用模板标签输出一些数据。例如:

<div class="newslist">    {pboot:list num=6}    <li>        <a href="[list:link]">[list:title]</a>    </li>    {/pboot:list}    <a href="javascript:;" class="loadmore">加载更多</a></div>

先读取6条数据,让搜索引擎最少能抓取到最新的6条文章。

然后再使用Ajax去调取剩余的新闻内容,实现点击加载更多的效果。

下面就是核心AJAX调取API数据部分代码

<script>    $(function(){        var Page = 1;        // 每页展示12个        var Num = 6;        $(document).on('click','.loadmore',function(){            // 页数            Page++;            $.ajax({                type: 'POST',                url: '/api.php/list/{sort:scode}/page/' + Page + '/num/' + Num + '/order/sorting',                dataType: 'json',                data: {                    appid: '{pboot:appid}',                    timestamp: '{pboot:timestamp}',                    signature: '{pboot:signature}',                },                success: function( response, status ){                    console.log(response);                    var Data = response.data;                    if( response.code ){                        //获取数据成功                        var Html = '';                        jQuery.each( Data, function( index, value ){                            //构建HTML                            Html +=  '<li>';                            Html +=  '    <a href="'+ value.contentlink +'">'+ value.title +'</a>';                            Html +=  '</li>';                        });                        // 为了测试,延迟1秒加载                        setTimeout(function(){                            // 插入数据到页面,放到最后面                            $('.newslist ul').append(Html);                        },500);                    }else{                        $('.loadmore').slideUp();                    }                },                error: function(xhr, type){                    console.log('Ajax error!');                }            });        });    });</script>

请注意在后台开启WebAPI,如下图。

用PbootCms API接口实现Ajax无刷新分页 点击加载更多(图1)

其中API强制认证,可以按你的实际情况选择启用。

到此教程结束。


JS自动滚动。在原有的JS上添加

<script type="text/javascript">
$(window).bind('scroll',function(){
	 if($('.erlo_lj_more').size()>0){
		  var st=$('.erlo_lj_more').offset().top;
		  if($('#erlo_lj_data .erlo_li').size()>0)st=$('#erlo_lj_data .erlo_li').last().offset().top;
		  if($(window).scrollTop()>st-$(window).height()/2-$(window).height()/3){
			   $('.loadmore').click();
		  }
	}
})
</script>


转载请注明:Pbootcms» 用PbootCms API接口实现Ajax无刷新分页 点击加载更多

标签:
上一页:pbootcms 留言添加附件图片更改
没有了
最近更新作品
用PbootCms API接口实现Ajax无刷新分页 点击加载更多
更新时间:2022-06-17

723人已经看过了!

pbootcms 留言添加附件图片更改
更新时间:2022-05-27

791人已经看过了!

当前三级栏目高亮,二级栏目高亮,加显示不显示
更新时间:2021-12-16

673人已经看过了!

yunucms判断分站显示内容
更新时间:2020-12-14

86人已经看过了!

pbootcms栏目添加字段
更新时间:2020-08-15

184人已经看过了!