帝国cms AJAX无刷新加载更多内容怎么实现_帝国cms AJAX加载更多内容实现方法-帝国CMS-PHP中文网

帝国cms AJAX无刷新加载更多内容怎么实现_帝国cms AJAX加载更多内容实现方法

下次还敢

发布： 2025-10-13 13:45:02

原创

328人浏览过

帝国CMS通过AJAX实现无刷新加载，首先创建loadmore.php接口文件，利用GET请求接收分页参数，查询数据库并返回JSON数据；接着在前端模板添加内容容器和“加载更多”按钮；然后引入jQuery发送AJAX请求，动态追加数据到页面；最后优化样式与交互体验，确保安全过滤与性能缓存。

帝国cms ajax无刷新加载更多内容怎么实现_帝国cms 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）中，保留原有列表结构，并增加一个“加载更多”按钮和容器。

Trae国内版

国内首款AI原生IDE，专为中国开发者打造

815

查看详情

示例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注入，生产环境建议增加缓存机制提升性能。

以上就是帝国cms AJAX无刷新加载更多内容怎么实现_帝国cms AJAX加载更多内容实现方法的详细内容，更多请关注php中文网其它相关文章！