您当前的位置：首页 > 建站教程 > 帝国 CMS 教程

帝国 CMS AJAX 无刷新多条件筛选完整版代码｜无需刷新页面高级搜索

时间：2026-08-28 12:52:29 来源：aliz.cn 作者：SKY 阅读：

前言

普通的多条件搜索提交表单后页面会整页刷新，用户体验差。采用 AJAX 异步请求，点击筛选条件，只刷新列表内容，顶部筛选条件、侧边栏、导航保持不动，非常适合产品库、资源列表、房源、教程资源站。

实现思路：前端 jQuery 监听筛选表单，收集参数异步 POST 给后台处理接口，PHP 查询数据库返回 html 列表，JS 把结果渲染到页面容器。适配版本：帝国 CMS7.5、8.0

⚠️安全前置提醒

所有 GET/POST 参数必须使用帝国自带过滤函数RepPostStr()、(int)强制过滤，杜绝 SQL 注入。
新建的接口文件不要放在 data、class 目录，建议放在/e/ajax/。
测试时先关闭缓存，调试完成再开启。

一、第一步：新建 AJAX 接口文件 ajax_list.php

新建目录 /e/ajax/，创建文件 /e/ajax/ajax_list.php

<?php
require('../../class/connect.php');
require('../../class/db_sql.php');
$link=db_connect();
$empire=new mysqlquery();

//接收筛选参数并且过滤
$classid=(int)$_POST['classid'];
$dz=RepPostStr($_POST['dz']);
$minprice=(int)$_POST['minprice'];
$maxprice=(int)$_POST['maxprice'];
$key=RepPostStr($_POST['key']);

//查询条件 1=1作为永真条件，方便后续拼接and
$where='1=1';

if(!empty($key)){
    $where.=" and title like '%$key%'";
}
if($classid>0){
    $where.=" and classid='$classid'";
}
if(!empty($dz)){
    $where.=" and dz='$dz'";
}
if($minprice>0){
    $where.=" and price >= '$minprice'";
}
if($maxprice>0){
    $where.=" and price <= '$maxprice'";
}

//主查询语句，news换成你自己的数据表模型后缀
$sql=$empire->query("select * from {$dbtbpre}ecms_news where $where order by newstime desc limit 30");

//循环输出列表HTML
if($empire->num($sql)==0){
    echo '<li>暂时没有找到符合条件的数据</li>';
}else{
    while($r=$empire->fetch($sql)){
        $titleurl=sys_ReturnBqTitleLink($r);
?>
<li>
    <a href="<?=$titleurl?>"><?=$r['title']?></a>
    <p>地区：<?=$r['dz']?> ｜价格：<?=$r['price']?></p>
</li>
<?php
    }
}

db_close();
$empire=null;
exit;
?>

二、第二步：前台页面完整模板代码（筛选表单 + 列表容器 + JS）

放到你的列表页模板、首页模板，jQuery 必须引入

<!--筛选表单区域-->
<div class="filter-box">
    <div>
        <label>关键词</label>
        <input type="text" id="key" placeholder="输入标题">
    </div>
    <div>
        <label>栏目</label>
        <select id="classid">
            <option value="0">全部栏目</option>
            <option value="12">建站教程</option>
            <option value="13">服务器运维</option>
        </select>
    </div>
    <div>
        <label>地区</label>
        <select id="dz">
            <option value="">不限地区</option>
            <option value="广东">广东</option>
            <option value="北京">北京</option>
        </select>
    </div>
    <div>
        <label>价格区间</label>
        <input type="number" id="minprice" placeholder="最低价">
        <input type="number" id="maxprice" placeholder="最高价">
    </div>
    <button id="searchBtn">筛选查询</button>
</div>

<!--列表渲染容器，AJAX加载结果放到这里-->
<ul id="list_result">
    <!--初始默认列表内容可放灵动标签输出-->
    [e:loop={'select * from phome_ecms_news order by newstime desc limit 30',30,0,0}]
    <li>
        <a href="<?=$bqr['titleurl']?>"><?=$bqr['title']?></a>
        <p>地区：<?=$bqr['dz']?>｜价格：<?=$bqr['price']?></p>
    </li>
    [/e:loop]
</ul>

<!--引入jQuery库-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$(function(){
    $("#searchBtn").click(function(){
        //获取表单所有筛选值
        var key = $("#key").val();
        var classid = $("#classid").val();
        var dz = $("#dz").val();
        var minprice = $("#minprice").val();
        var maxprice = $("#maxprice").val();

        //加载提示文字
        $("#list_result").html("<li>数据加载中...</li>");

        //发起AJAX异步请求
        $.ajax({
            url:"/e/ajax/ajax_list.php",
            type:"POST",
            data:{
                key:key,
                classid:classid,
                dz:dz,
                minprice:minprice,
                maxprice:maxprice
            },
            success:function(res){
                //返回结果渲染到列表容器
                $("#list_result").html(res);
            },
            error:function(){
                $("#list_result").html("<li>请求出错，请重试</li>");
            }
        })
    })
})
</script>

三、进阶：选择框 change 自动触发筛选（无需点击按钮）

如果你想下拉框切换就立刻筛选，不用点查询按钮，把 JS 代码替换下面这段即可：

<script>
$(function(){
    //绑定所有筛选控件变更事件
    $("#classid,#dz,#minprice,#maxprice").on('change',function(){
        loadData();
    });
    //点击按钮查询
    $("#searchBtn").click(function(){
        loadData();
    });

    function loadData(){
        var key = $("#key").val();
        var classid = $("#classid").val();
        var dz = $("#dz").val();
        var minprice = $("#minprice").val();
        var maxprice = $("#maxprice").val();
        $("#list_result").html("<li>加载中...</li>");
        $.ajax({
            url:"/e/ajax/ajax_list.php",
            type:"POST",
            data:{
                key:key,
                classid:classid,
                dz:dz,
                minprice:minprice,
                maxprice:maxprice
            },
            success:function(res){
                $("#list_result").html(res);
            },
            error:function(){
                $("#list_result").html("<li>请求失败</li>");
            }
        })
    }
})
</script>

四、增加分页（AJAX 无刷新分页方案）

AJAX 分页不能使用帝国原生$searchpage，需要自制分页参数。 1、ajax_list.php 接收 page 参数

$page=(int)$_POST['page'];
$pagesize=30;
$offset=$page*$pagesize;
$sql=$empire->query("select * from {$dbtbpre}ecms_news where $where order by newstime desc limit $offset,$pagesize");

2、前端 JS 传递 page 页码参数，点击分页按钮调用加载函数，传入页码即可。