帝国cms7.5无刷新 Ajax 点击加载更多列表信息

2024-12-22 / EmpireCMS / 32浏览

帝国cms7.5无刷新 Ajax 点击加载更多列表信息

帝国CMS 7.5 Ajax无刷新加载，高效实现点击加载更多列表信息，精简源码仅展示核心功能，优化用户体验，提升网页加载效率。

1.页面需要引入jquery.js文件

2. 列表页合适位置添加以下代码（我是在<ul>中添加的，关键是要添加代码： id=”showajaxnews”，这样点击点击添加更多按钮时，列表内容就被添加到了<ul class=”slLis wrap” id=”showajaxnews”>下面）

我的是这样的：<ul class=”slLis wrap” id=”showajaxnews”>，大家对照自行修改。

3. 在列表页加上点击加载更多按钮。

我的是这样的：<a class=”load_more_btn” id=”loadmore” target=”_self” style=”display: block;”>点击加载更多</a>

4. 在列表页</body>前加上以下js代码。

说明：

（1）. 代码中 ‘limit’:25 ， 25需修改为你想点击一次加载更多时加载的条数。通常要修改成和系统后台 → 系统设置 → 系统参数设置 → 信息设置中的：前台结合项列表每页显示 25 个信息这个数一样

（2）. 代码中有 <img src=”/skin/list/loaduai.gif” width=20/> 页面加载中…，所以需要在 /skin/list/ 下添加这个表示正在加载的GIF动画图标 loaduai.gif 。你也可以把图标放在别的位置，但要修改相应的这个 /skin/list/loaduai.gif 代码。

<script>

$(function(){

     var i = 1; //设置当前页数

    $('#loadmore').click(function(){

        $.ajax({

        url : '/e/action/getmorearticle.php',

                type:'POST',

                 data:{"next":i,'classid':'[!--self.classid--]','action':'getmorenews','limit':25,'small_length':120},

            dataType : 'html',

        beforeSend:function(){

                $("#loadmore").show().html('<img src="/skin/list/loaduai.gif" width=20/> 页面加载中...');

           $('#loadmore').attr('disabled','disabled');

        },

            success : function(data){

           if(data){

               $("#showajaxnews").append(data);

                          $("#loadmore").removeAttr('disabled');

              $("#loadmore").html('点击加载更多');

                 i++;

            }else{

                $("#loadmore").show().html("已全部加载完毕！");

                        $('#loadmore').attr('disabled','disabled');

                return false;

            }

           }

        });

    });

});

</script>

5. 在/e/action/下添加文件 getmorearticle.php（修改 $limit=25; 中的25和 js中的数字一样）

getmorearticle.php内容如下：

<?php

require('../class/connect.php');

require('../class/db_sql.php');

require('../data/dbcache/class.php');

$actions = RepPostVar2($_POST[action]);

$limits = (int)$_POST[limit];

$classids = (int)$_POST[classid];

$lengths = (int)$_POST[length];

$small_lengths = (int)$_POST[small_length];

if($actions == 'getmorenews'){

$table = 'news';  //如果下载列表页使用就把 news  换成  download

if(empty($limits)){$limit=25;}else{ $limit=$limits;}

if(empty($classids)){$where=null;}else{ $where='where classid in('.$classids.')';}

if(empty($lengths)){$length=50;}else{ $length=$lengths;}

if(empty($small_lengths)){$small_length=500;}else{ $small_length=$small_lengths;}

$link=db_connect();

$empire=new mysqlquery();

$num =(int)$_POST['next'] *$limit;

  if($table){

        $sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by newstime desc limit $num,$limit");

    while($r=$empire->fetch($sql)){

        if($r[titlepic]==''){

        $r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";

        }

    $oldtitle=stripSlashes($r[title]);

        $titlepic=stripSlashes($r[titlepic]);

    $title=sub($oldtitle,'',$length);

    $smalltext=stripSlashes($r[smalltext]);

        $plnum=stripSlashes($r[plnum]);

        $classid=stripSlashes($r[classid]);

        $id=stripSlashes($r[id]);

    $smalltext=sub($smalltext,'',$small_length);

    $classname=$class_r[$r[classid]][classname];

    $newsurl=$public_r[newsurl];

    $classurl=$newsurl.$class_r[$r[classid]][classpath];

    $urls = sys_ReturnBqTitleLink($r);

?>

//以下修改成你的列表页模板的列表内容模板(list.var) (*)的内容

<li>

<a href="<?=$urls?>">

<img class="lazys"  alt="<?=$r[title]?>" src="<?=$r[titlepic]?>"  style="display: block;"/> </a>

<div>

   <p><a href="<?=$urls?>"><?=$r[title]?></a></p>

    <div class="clearfix">

     <a href="/e/pl/?classid=<?=$r[classid]?>&id=<?=$r[id]?>"> <span><?=$r[plnum]?></span><span> 评论</span> </a> <a href="<?=$r[titleurl]?>"> <span><?=$r[onclick]?> 浏览   </span></a></div>

  </div>

</li>

//以上修改成你的列表页模板的列表内容模板(list.var) (*)的内容

<?php

}

}

}

db_close();

$empire=null;

?>