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

PB通过API接口,实现AJAX点击加载更多新闻

时间:2019-08-07   来源:网站建设

官网上发的原始版本,特别整理一下重新发布。希望对大家有所作用


弟一步:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

第二步:
    <!------------定义内容的Dom位置----------------->
  <div class="mylist">
    {pboot:list   num=2 order='sorting asc'}
     <div class="title"><a href="[list:link]">[list:title]</a></div>
    <div class="desc">[list:description]</div>
    <hr>
    {/pboot:list}
          
</div>

     
  第三步:          
<button id="More" type="submit">点击加载更多</button> 




<script>
//先定义一些基本的内容

//Page就是第几页,由当前页0 + 1,就是第二页,parseInt确保该数值是Int类型。
var Page = parseInt('0') + 1;

//Num就是每页几条信息,因为列表默认显示的是2条,所以这里设为2,结合上面的第二页实际上就是从第三条信息开始读取。
var Num  = 10;

//定义内容的Dom位置,也就是读取出来的内容要添加到哪个div里面去。
var Dom  = jQuery('.list');

//接下来写在点击按钮('.more')的时候触发事件
jQuery('#More').on('click', function(){

    //先构建Api的地址,具体的Api地址参数,请参考官方手册。
    var url = '/api.php/list/2/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 ){
                     //获取一些数据
                  var Article_Url   = '/index.php/content/' + value.id,
                      Article_Date  = value.date.split(' ')[0];
                 
                    
                    //将内容append到列表
                    var Html = '<div class="title"><a href="' + Article_Url + '">' + value.title + '</a></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 );
        }
    })
})
    
   
    
    
</script>


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

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

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

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

网站没有安装SSL证书了,但是谷歌浏览器依旧跳转到HTTPS,怎么处理?
网站没有安装SSL证书了,但是谷歌浏览器依旧跳转到HTTPS,怎么处...

假如你的网站之前安装了SSL证书,然后到期之后,你将你的网站SSL证书也删除了。但是在使用谷歌浏览器打开网...

在文章详情嵌入PDF如何写代码?
在文章详情嵌入PDF如何写代码?

有时候我们需要将PDF放在文章详情中直接预览,而不是点击之后下载。在之前的开发过程中,一般都是点击链接直...

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

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

微信
Top