帝国CMS通过AJAX实现无刷新加载，首先创建loadmore.php接口文件，利用GET请求接收分页参数，查询数据库并返回JSON数据；接着在前端模板添加内容容器和“加载更多”按钮；然后引入jQuery发送AJAX请求，动态追加数据到页面；最后优化样式与交互体验，确保安全过滤与性能缓存。
帝国CMS实现AJAX无刷新加载更多内容，核心是通过前端AJAX请求调用后端PHP接口，动态获取分页数据并追加到页面中，无需刷新整个页面。下面详细介绍具体实现步骤。
1. 创建数据调用接口文件
在网站根目录或e/extend/目录下创建一个PHP文件，例如loadmore.php，用于处理AJAX请求并返回JSON格式的数据。
示例代码：
loadmore.php
<?php
require('../e/class/connect.php'); // 引入帝国CMS数据库配置
require('../e/class/db_sql.php');
require('../e/data/dbcache/class.php');
<p>$link = db_connect();
$empire = new mysqlquery();</p><p>$page = (int)$_GET['page'] ?? 1;
$limit = (int)$_GET['limit'] ?? 10;
$start = ($page - 1) * $limit;</p><p>$classid = (int)$_GET['classid'] ?? 0; // 指定栏目ID，可选</p><p>$where = '';
if($classid > 0) {
$where = " and classid='$classid'";
}</p><p>$sql = $empire->query("SELECT id,title,smalltext,titleurl,onclick,newszt,truetime FROM {$dbtbpre}ecms_news WHERE checked=1 $where ORDER BY newstime DESC LIMIT $start,$limit");</p><p>$data = array();
while($r = $empire->fetch($sql)) {
$r['title'] = htmlspecialchars($r['title']);
$r['titleurl'] = htmlspecialchars($r['titleurl']);
$r['smalltext'] = strip_tags($r['smalltext']);
$data[] = $r;
}</p><p>echo json_encode($data);
exit;
?></p>
2. 前端页面添加“加载更多”按钮
在需要展示内容的模板（如list.listtemp）中，保留原有列表结构，并增加一个“加载更多”按钮和容器。
示例HTML结构：
<div id="content-list">
<!-- 列表内容由JS动态插入 -->
</div>
<button id="load-more" onclick="loadMore()">加载更多</button>
<span id="loading" style="display:none;">正在加载...</span>
3. 编写AJAX加载脚本
引入jQuery或使用原生JS发送请求。以下以jQuery为例：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let currentPage = 1;
const limit = 10;
<p>function loadMore() {
$('#loading').show();
$('#load-more').prop('disabled', true);</p><pre class='brush:php;toolbar:false;'>$.ajax({
url: '/loadmore.php',
type: 'GET',
data: {
page: ++currentPage,
limit: limit,
classid: 2 // 可根据需要传栏目ID
},
dataType: 'json',
success: function(data) {
if(data.length === 0) {
$('#load-more').text('没有更多内容了').prop('disabled', true);
} else {
let html = '';
data.forEach(function(item) {
html += `
<div class="item">
<h3><a href="${item.titleurl}">${item.title}</a></h3>
<p>${item.smalltext}</p>
<span>点击：${item.onclick} | 时间：${new Date(item.truetime*1000).toLocaleString()}</span>
</div>
`;
});
$('#content-list').append(html);
}
},
error: function() {
alert('加载失败，请重试');
currentPage--;
},
complete: function() {
$('#loading').hide();
$('#load-more').prop('disabled', false);
}
});
} </script>
4. 样式与用户体验优化
可以为加载中的状态、按钮样式等添加CSS美化。
例如：
#content-list .item {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
#load-more {
margin: 20px auto;
display: block;
padding: 10px 20px;
font-size: 16px;
}
#loading {
margin-left: 10px;
color: #999;
}
基本上就这些。只要确保接口能正确返回数据，前端能正常请求并渲染，就能实现无刷新加载。注意安全过滤参数，避免SQL注入，生产环境建议增加缓存机制提升性能。
