Ajax无刷新加载更多帝国CMS 7.5列表信息源码示例

Ajax无刷新加载更多帝国CMS 7.5列表信息源码示例

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2024-10-16 16:56:03
文章简介

帝国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/>&nbsp;页面加载中...,所以需要在 /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/>&nbsp;页面加载中...');
           $('#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]?>&amp;id=<?=$r[id]?>"> <span><?=$r[plnum]?></span><span>&nbsp;评论</span> </a> <a href="<?=$r[titleurl]?>"> <span><?=$r[onclick]?>&nbsp;浏览&nbsp;&nbsp;&nbsp;</span></a></div>
  </div>
</li>
//以上修改成你的列表页模板的 列表内容模板(list.var) (*)的内容                     

<?php
}
}
}
db_close();
$empire=null;
?>

具体案例查看墨鱼工作室模版:https://www.moyubuluo.com/studio/629.html

关联内容: 帝国cms Ajax 列表 加载更多
优化帝国CMS图片附件上传,默认勾选水印与缩略图生成设置
« 上一篇 2024年08月27日
帝国CMS统计多表今日更新总数代码教程
下一篇 » 2025年03月12日
  • 帝国CMS列表AJAX无刷新点赞功能代码
    614阅读0条评论16个赞
    帝国CMS列表内AJAX无刷新点赞,实现实时交互体验。代码简洁高效,减少页面重载,提升用户点赞效率。优化用户体验,提升网站互动率,是建站必备利器。
  • 帝国CMS,多表联合查询自定义列表技巧详解
    1598阅读2条评论8个赞
    详解帝国CMS自定义列表多表联合查询技巧,轻松实现数据整合与展示。通过本教程,您将学会如何高效利用联合查询功能,提升网站内容展示效果,优化用户体验。
  • 帝国CMS栏目列表页调用显示更新时间日期
    3776阅读0条评论66个赞
    帝国CMS栏目列表页调用显示更新时间或者说刷新时间,特别适用一些分类信息网之类的。
  • 帝国CMS自定义列表发布,同步更新栏目及首页教程
    5001阅读2条评论148个赞
    使用帝国CMS自定义列表时,可巧妙利用栏目设置中的发布同时生成当前栏目、父栏目与首页功能。操作指南:进入栏目管理,选择目标栏目,开启发布文章同时生成选项,并勾选当前栏目、父栏目及首页。这样,每发布一篇新文章,系统将自动更新这三个页面,提升内容展示效率与网站SEO。轻松实现信息同步,优化用户体验。
  • 帝国CMS数据更新中刷新首页改为刷新所有自定义列表教程
    7844阅读2条评论127个赞
    将帝国CMS数据更新中的刷新首页更改为刷新所有自定义列表的教程:首先,登录帝国CMS后台管理系统;接着,导航至数据更新模块;然后,在更新页面选项卡下,找到原刷新首页按钮;点击旁边的设置或编辑选项,将其名称修改为刷新所有自定义列表;确认保存更改。此操作将允许您一键更新所有自定义列表页面,提高内容管理效率。

如本文对您有帮助,就请墨鱼抽根烟吧!