惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
宝玉的分享
宝玉的分享
Google DeepMind News
Google DeepMind News
腾讯CDC
G
Google Developers Blog
Martin Fowler
Martin Fowler
Microsoft Security Blog
Microsoft Security Blog
Recent Announcements
Recent Announcements
爱范儿
爱范儿
Engineering at Meta
Engineering at Meta
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
aimingoo的专栏
aimingoo的专栏
有赞技术团队
有赞技术团队
Jina AI
Jina AI
人人都是产品经理
人人都是产品经理
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
M
MIT News - Artificial intelligence
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
美团技术团队
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志

博客园 - 明仔¥

TP6 实现上传文件 页面自适应纯CSS,使用rem单位 jQuery解决高度统一问题 手机端页面自适应解决方案—rem布局 mysql中bigint、int、mediumint、smallint 和 tinyint的取值范围 修改PHP 上传文件大小限制 WampServer下修改和重置MySQL密码 CSS文件添加 @charset "utf-8"; 可能会引起样式在IE6下失效 Windows Server 2003下MySQL 5.1.32安装图文 如何彻底卸载MySQL 最好用的mysql密码忘记的解决方法 ASP将ACCESS表中的数据记录导入到EXCEL文件中 - 明仔¥ - 博客园 clng与cint的区别及防溢出函数 - 明仔¥ - 博客园 几个比较好看的Button的CSS - 明仔¥ - 博客园 网站样式切换效果 - 明仔¥ - 博客园 asp生成excel报表 VB中如何将字符串转换成数值来运算? utf-8编码用于asp 出现乱码的问题--从数据库调用的是乱码--gb2312转换utf-8 - 明仔¥ - 博客园 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法 - 明仔¥ - 博客园
dedecms Ajax异步获取文章列表
明仔¥ · 2017-03-19 · via 博客园 - 明仔¥

dedecms如何通过ajax(异步)动态获取文章列表数据。

第一步添加:服务端(PHP)代码

打开plus目录下面的list.php文件,在12行代码下面添加以下代码:

if(isset($_GET['ajax'])){
  //传递过来的分类ID
  $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;
  //页码
  $page = isset($_GET['page']) ? intval($_GET['page']): 0;
  //每页多少条,也就是一次加载多少条数据
  $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;
  //数据获取的起始位置。即limit条件的第一个参数。
  $start = $page>0 ? ($page-1)*$pagesize : 0;
  //这个是用于首页实现瀑布流加载,因为首页加载数据是无需分类的,所以要加以判断,如果无需
  $typesql = $typeid ? " WHERE typeid=$typeid" : '';
  $total_sql = "SELECT COUNT(id) as num FROM `dede_archives`  $typesql ";
  $temp = $dsql->GetOne($total_sql);
  $total = 0;//数据总数
  $load_num =0;
  if(is_array($temp)){
    //要加载的次数,因为默认已经加载了
    $load_num= round(($temp['num']-12)/$pagesize);
    $total = $temp['num'];
  }
  $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
        t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
        FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id  
        $typesql ORDER BY id DESC LIMIT $start,$pagesize";
//echo "$sql";
   $dsql->SetQuery($sql);
   $dsql->Execute('list');
   $statu = 0;//是否有数据,默认没有数据
   $data = array();
     $index = 0;
while($row = $dsql->GetArray("list")){
     $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160);
     $row['id'] =  $row['id'];
     $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],
     $row['senddate'],$row['title'],$row['ismake'],
     $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],
     $row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
     $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],
     $row['isdefault'],$row['defaultname'],$row['ispart'],
     $row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
     if($row['litpic'] == '-' || $row['litpic'] == ''){
        $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
     }
    if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
       $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
    }
  $row['picname'] = $row['litpic'];//缩略图
  $row['stime'] = GetDateMK($row['pubdate']);
  $row['typelink'] = "".$row['typename']."";//分类链
  $row['fulltitle'] = $row['title'];//完整的标题
  $row['shorttitle'] = $row['shorttitle'];//副标题
  $row['title'] = cn_substr($row['title'], 60);//截取后的标题
  $data[$index] = $row;
   $index++;
}
if(!empty($data)){
   $statu = 1;//有数据
}
$result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
echo json_encode($result);//返回数据
exit();
}

如图:

第二步:添加js异步请求代码

打开你的文章列表栏目,添加以下js代码:

$(function(){ 
    var loadConfig = {
        //请求地址
        url_api:'/plus/list.php',
        //0就是首页调用数据  列表:typeid:{dede:field name="typeid"/}
        typeid:{dede:field name="typeid"/},  
        page:2, //开始页码
        pagesize:2, //需要渲染的数据条数
        loading : 0,//加载状态,默认为未加载
    }
    function  loadMoreApply(){
        if(loadConfig.loading == 0){
            var typeid = loadConfig.typeid;
            var page = loadConfig.page;
            var pagesize = loadConfig.pagesize;
            var url = loadConfig.url_api,data={
                ajax:'pullload',
                typeid:typeid,
                page:page,
                pagesize:pagesize
            };
            function ajax(url, data) {
                $.ajax({
                    url: url,
                    data:data,
                    async: false,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        addContent(data);
                    }
                });
            }
            ajax(url,data);
        }
    }
    function addContent (rs){
        if(rs.statu== 1){
            var data = rs.list;
            var total = rs.total;
            var arr=[];
            var len = data.length;
            var html = '';
            for(var i=0;i<len;i++){
             html = '<div class="say_out animated bounceIn">'+
               '<div class="left my_pic">'+
                '<img src="'+data[i].picname+'" width="100" height="100" alt=""/>'+
                 '</div>'+
                 '<div class="right my_text">'+
                     '<p> '+data[i].info+'<span> '+data[i].stime+'</span> '+
                    ' </p>'+
                  '</div>'+
                 ' <div class="clear"></div>'+
             '</div>';
            }
            arr.push(html);
            $('#a_say').append(html);
            loadConfig.load_num = rs.load_num;
            if(total loadConfig.load_num){
                 console.log("没有数据了");
                 loadConfig.loading=1;
                 return false;
            }
            loadConfig.page++;
            loadConfig.loading = 0;
        }
    }
    $(window).scroll(function(){ 
        //获取当前文档的高度
        var docHeight = $(document).height();
        //获取当前滚动条的高度
        var scrollTop = $(this).scrollTop();
        //获取当前可视区的高度
        var height = $(this).height();
        if((docHeight-scrollTop-height)<=20){ 
           loadMoreApply(); 
        }
    });
});

注意:如果说你的dedecms版本是GBK的,可能读取出来的数据会显示为null,是因为jquery的json只支持utf-8编码,不支持gbk。所以,我们得用dede自身的编码函数来进行转化。

写在最后:因为我这是利用滚动条的滚动距离来进行的异步获取数据,如果你想通过点击一个文本来加载数据也是可以了。只需要一个点击事件来调用loadMoreApplyz()这个函数即可。