帝国CMS实现AJAX无刷新加载更多内容，核心是通过前端AJAX请求调用后端PHP接口，动态获取分页数据并追加到页面中，无需刷新整个页面。下面详细介绍具体实现步骤。
1. 创建数据调用接口文件
在网站根目录或e/extend/目录下创建一个PHP文件，例如loadmore.php，用于处理AJAX请求并返回JSON格式的数据。
示例代码：
loadmore.php
<?phprequire(‘../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注入，生产环境建议增加缓存机制提升性能。
评论(0)