dedecms Ajax异步获取文章列表

最近趁着自己有点时间,就把自己博客的个人日记模块改进了下。

   可能大家都知道:以前个人日记这个模块,都是通过普遍的文章列表加+分页的形式来进行展示的。可效果却又采用了CSS3+时光轴的效果来制作的,总感觉有点不搭配。很早前就想通过ajax异步去从数据库拿取数据,可一直没有时间和其它原因的问题,就把这件事给忘记了。

好了,废话就不多扯了!我们一起来看看: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, //加载状态,默认为未加载