dede实现点击使用ajax加载更多数据 (三级分类版本)

关注

原创最新推荐文章于 2026-06-07 11:34:49 发布 550 阅读 AI 写同款· GEO 优化 ›

一、首先找到并打开/plus/list.php文件，在里面找到如下代码：
require_once(dirname(FILE)."/…/include/common.inc.php");
在这段代码下面添加以下代码：

//列表页瀑布流无限加载代码
if(isset($_GET['ajax'])){
    $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
    $oldids = isset($_GET['ids']) ? $_GET['ids']:''; //已存在的文章id集
    $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
    $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条，也就是一次加载多少条数据
    $start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
    // 检测该id是否还有子分类，如果有将获取其所有子分类的id，合并。用以获取所有文章
    $twosql = "SELECT id,reid,topid,typename FROM dede_arctype WHERE reid=$typeid";
    $dsql->SetQuery($twosql);
    $dsql->Execute('twocls');
    $twoArr = array();
    $ids = ''; //获取所有分类id
    while($twoList = $dsql->GetArray('twocls')){
        $ids .= $twoList['id'].',';
        $twoArr[] = $twoList;
    }
    if(!empty($twoArr)){
        $ids = substr($ids, 0, strlen($ids)-1);
        // 获取所有子分类id
        $thrsql = "SELECT id,reid,topid,typename FROM dede_arctype WHERE reid in ($ids)";
        $dsql->SetQuery($thrsql);
        $dsql->Execute('thrcls');
        while($thrList = $dsql->GetArray('thrcls')){
            $ids .= $thrList['id'].',';
        }
    }else{
        $ids = $typeid;
    }
    //检测最后一位字符如果为,执行删除
    $lastStr = substr($ids, -1); //获取最后一位字符
    if($lastStr == ','){
        $ids = substr($ids, 0, strlen($ids)-1); //去除最后一位字符
    }

    $typesql = " WHERE a.typeid IN ($ids) AND arcrank=0 AND a.id NOT IN ($oldids)";
    // 获取文章总条数
    $total_sql = "SELECT COUNT(id) as num FROM `#@__archives`  WHERE typeid in ($ids) AND arcrank=0";
    $temp = $dsql->GetOne($total_sql);
    $total = 0;//数据总数
    $load_num =0; //
    if(is_array($temp)){
        $load_num= round(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了
        $total = $temp['num'];
    }
    // 获取所有文章
    $sql = "SELECT a.*,b.price FROM `#@__archives` as a JOIN `#@__addonarticle` as b ON a.id=b.aid $typesql ORDER BY pubdate DESC LIMIT $start,$pagesize";


    $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['stime'] = date('Y-m-d', $row['pubdate']);
        $row['click'] = $row['click'];
        $row['typelink'] = "".$row['typename']."";//分类链
        $row['fulltitle'] = $row['title'];//完整的标题
        $row['shorttitle'] = $row['shorttitle'];//副标题
        $row['title'] = cn_substr($row['title'], 80);//截取后的标题
        $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();
}

二、在需要使用的页面引入jquery，实现点击发送ajax

html

<div class="m_index1_list">
				<ul>
                    {dede:list pagesize='4'}
					<li data-id="[field:id/]">
						<a href="view.php?aid=[field:id/]">
							<div class="imgs">
								<img src="[field:picname/]" alt="[field:title/]">
							</div>
							<div class="text">
								<h1>[field:title/]</h1>
								<p class="nowrap">[field:description/]</p>
								<p class="nums">[field:nums/]节 | [field:click/]人在学</p>
								<p class="price">[field:price/]</p>
							</div>
						</a>
					</li>
                    {/dede:list}
					
				</ul>
			</div>
            <div class="getmore">点击加载更多</div>
            <div class="more_empty">数据已全部加载完成~</div>

$(function(){
        var currentpage = 1;
        var ids = '';
        //点击加载更多
        $(".getmore").click(function(){
            //第一次点击时获取已有文章的id
            if(currentpage == 1){
                $(".m_index1_list ul li").each(function(e){
                    ids += $(this).attr('data-id')+',';
                })
                ids = ids.slice(0, ids.length-1); //移除最后一位,
            }
            console.log(ids);
            var typeid = "{dede:field name='typeid' runphp='yes' /}";
            console.log(typeid);
            sendAjax(currentpage, typeid, ids, function(res){
                console.log(res);

                return false;
                if(res.statu != 1){
                    $(".more_empty").css('display', 'block');
                    $(".getmore").css('display', 'none');
                }else{
                    $(res.list).each(function(i, n){
                        var str = '';
                        str += '<li><a href="view.php?aid='+n.id+'"><div class="imgs"><img src="'+n.litpic+'" alt="'+n.title+'"></div><div class="text"><h1>'+n.title+'</h1><p class="nowrap">'+n.description+'</p><p class="nums">'+n.nums+'节 | '+n.click+'人在学</p><p class="price">'+n.price+'</p></div></a></li>';
                        $(".m_index1_list ul").append(str);
                    })
                }
                currentpage++;
            });
            
        })

    })

js方法

/**
 * 
 * @param currentpage int 当前页码 
 * @param typeid in 分类id 
 * @param ids string 第一次请求时已有的文章id
 * @param callback function 成功回调函数
 */
function sendAjax(currentpage, typeid, ids, callback){
  console.log(currentpage)
  
  var url = "/plus/list.php";
          var data = {ajax:'pullload',typeid:typeid, ids:ids, page:currentpage,pagesize:4};
          $.ajax({
              url: url,
              data: data,
              async: false,
              type: 'GET',
              dataType: 'json',
              error: function (err) {
                  console.log(err)
                  // alert('网络错误,请检查网络是否正常');
              },
              success: function (data) {
                  // console.log(data);
                  typeof callback == "function" && callback(data);
                  
              }
          });
}