dede实现点击加载更多数据(ajax发送请求)

3 篇文章 0 订阅
本文详细介绍了如何在DedeCMS中实现列表页的瀑布流无限加载功能,通过修改/plus/list.php文件,添加AJAX请求处理代码,实现在页面底部点击加载更多来动态获取和展示内容。同时提供了前端页面引入jQuery并实现点击加载更多功能的示例代码。
摘要由CSDN通过智能技术生成

参考网址:http://www.dede58.com/a/zhimengjiaocheng/development/4580.html

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

//列表页瀑布流无限加载代码
if(isset($_GET['ajax'])){
    // echo 'ajax';
    // exit();
    $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类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条件的第一个参数。
    $typesql = $typeid ? " WHERE typeid=$typeid AND arcrank=0" : '';//这个是用于首页实现瀑布流加载,因为首页加载数据是无需分类的,所以要加以判断,如果无需
    $total_sql = "SELECT COUNT(id) as num FROM `#@__archives` $typesql ";
    $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.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath FROM `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id $typesql ORDER BY id 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

<div style="margin-top: 60px;">
                    <ul class="news-list" id="datalist">
                        {dede:list pagesize ='3'}
                            <li>
                                <img src="[field:picname/]" alt="[field:title/]">
                                <div>
                                    <h3>[field:title/]</h3>
                                    <p>[field:description/]</p>
                                    <span>[field:pubdate function="MyDate('Y\/m\/d',@me)"/]</span>
                                    <a href="[field:arcurl/]">+</a>
                                </div>
                                <a href="[field:arcurl/]" class='go-newsdetail'></a>
                            </li>
                        {/dede:list}
                       
                    </ul>
                    <div class="getmore-box">
                        <p style="display: none" id="loadmore">已经没有更多数据了</p>
                        <a href="javascript:void(0);" id="loadbtn" class="getmore-list">加载更多 / more</a>
                    </div>
                    <a href="javascript:gotop();" class="gotop"></a>
                </div>


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        var currentpage = 2;
        // 页面滚动到底部加载
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                // currentpage++;
                // console.log(currentpage)
                sendAjax(currentpage, function(){
                    currentpage++;
                });
            }
        });
		//点击加载更多
        $("#loadbtn").click(function(){
            sendAjax(currentpage, function(res){
                currentpage++;
            });
            
        })
    });

    function sendAjax(currentpage, callback){
        console.log(currentpage)
        var url = "/plus/list.php";
                var data = {ajax:'pullload',typeid:'{dede:field name="typeid"/}',page:currentpage,pagesize:3};
                $.ajax({
                    url: url,
                    data: data,
                    async: false,
                    type: 'GET',
                    dataType: 'json',
                    error: function () {
                        alert('网络错误,请检查网络是否正常');
                    },
                    success: function (data) {
                        console.log(data);
                        callback(true);
                        if(data.statu == 1){
                            $(data.list).each(function (i, n) {
                                var str = '';
                                str += '<li>';
                                str += '<img src="' + n.picname + '" alt="' + n.title + '">';
                                str += '<div>';
                                str += '<h3>' + n.title + '</h3>';
                                str += '<p>' + n.description + '</p>';
                                str += '<span>' + n.stime + '</span>';
                                str += '<a href="' + n.arcurl + '">+</a>';
                                str += '</div>';
                                str += '</li>';
                                $('#datalist').append(str);
                            });
                        }else{
                            $('#loadmore').show();
                            $('#loadbtn').hide();
                        }
                    }
                });
    }

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值