帝国CMS实现点击加载更多内容的AJAX效果，主要是通过异步请求动态获取分页数据并追加到页面中，避免整页刷新。这种做法提升用户体验，尤其适用于新闻列表、图片展示等需要大量内容加载的场景。以下是具体实现方法。
1. 准备支持AJAX调用的PHP接口
在帝国CMS中，并没有现成的AJAX数据接口，需要自己创建一个用于返回JSON格式数据的PHP文件，比如命名为 ajax_more.php，放在网站根目录或e/ajax/目录下。
示例代码：
<?phprequire_once(‘e/class/connect.php’);require_once(‘e/class/db_sql.php’);require_once(‘e/data/dbcache/class.php’);<p>$empire = new mysqlquery();$page = (int)$_GET[‘page’];$line = 10; // 每页显示条数$start = ($page – 1) * $line;</p><p>$sql = $empire->query("SELECT * FROM {$dbtbpre}ecms_news WHERE checked=1 ORDER BY newstime DESC LIMIT $start,$line");$data = array();</p><p>while($r = $empire->fetch($sql)) {$title = htmlspecialchars($r[‘title’]);$url = sys_ReturnBqTitleLink($r);$data[] = array(‘title’ => $title,’url’ => $url,’newstime’ => date(‘Y-m-d’, $r[‘newstime’]));}</p><p>echo json_encode($data);$empire->free($sql);db_close();?></p>
2. 前端页面添加“加载更多”按钮和内容容器
在需要实现加载更多的列表页（如 index.html 或 list.temp），添加一个内容容器和按钮：
<div id="news-list"> <!– 初始内容由模板生成 –> [e:loop={0,10,3,0}] <div class="item"> <a href="<?=sys_ReturnBqTitleLink($bqr)?>"><?=$bqr[title]?></a> <span><?=date(‘Y-m-d’,$bqr[newstime])?></span> </div> [/e:loop]</div><p><button id="load-more" onclick="loadMore()">点击加载更多</button></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1459" title="PicLumen"><img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6cb7867aa2958.png" alt="PicLumen" onerror="this.onerror=”;this.src=’/static/lhimages/moren/morentu.png’" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1459" title="PicLumen">PicLumen</a> <p>专业的AI图像生成和图像处理工具</p> </div> <a href="/ai/1459" title="PicLumen" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
3. 使用JavaScript发送AJAX请求
引入jQuery或使用原生JS，编写请求逻辑。以下以jQuery为例：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>var currentPage = 1;<p>function loadMore() {currentPage++;$.getJSON(‘ajax_more.php?page=’ + currentPage, function(data) {if(data.length === 0) {$(‘#load-more’).text(‘没有更多内容了’).prop(‘disabled’, true);return;}var html = ”;$.each(data, function(i, item) {html += ‘<div class="item"><a href="’ + item.url + ‘">’ + item.title + ‘</a><span>’ + item.newstime + ‘</span></div>’;});$(‘#news-list’).append(html);}).fail(function() {alert(‘加载失败，请重试’);});}</script></p>
4. 注意事项与优化建议
实际应用中需要注意以下几点：
确保PHP接口文件安全，防止SQL注入，已使用(int)强制转换$page跨站请求问题：如果前端页面与接口路径不一致，注意CORS设置性能优化：可对查询结果加缓存，避免频繁数据库查询分页逻辑要与原有列表一致，包括排序、条件筛选等移动端可改为滚动加载，监听scroll事件触发loadMore()
基本上就这些。只要前后端配合好，帝国CMS完全可以实现流畅的AJAX加载更多功能，无需依赖插件，灵活性高且易于维护。
评论(0)