欢迎光临北屯市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

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

时间:2021-06-22   来源:北屯市网站建设

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>


简单解释一下这个代码,从第二页开始读取,每次读取6条。为什么从第二页开始读取?因为前面我们已经在模板里输出6条数据啦。


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

image.png

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


到此教程结束。


版权声明:本文除特别说明外均由博主原创,尊重共享,欢迎转载!转载请注明来源。https://www.phpjin.com/cms/41.html

本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top