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>
声明:本站部分文章和图片来源于网络,如果侵犯到了您的权益,请联系我们,我们会及时删除。