1. 概述与核心原理
在传统的 web 应用中，当用户需要根据某个条件筛选数据时，通常会通过提交表单来刷新整个页面。然而，这种方式会导致用户体验不佳。通过引入 ajax（asynchronous javascript and xml）技术，我们可以在不刷新页面的情况下，与服务器进行数据交互，实现数据的实时更新。
本教程将结合 CodeIgniter 的 MVC 架构和 jQuery 库，实现以下流程：
- 前端 (View)：用户在下拉菜单中选择一个选项。
- JavaScript (jQuery)：捕获下拉菜单的change事件，获取选中的值，并构建一个 AJAX 请求发送给后端。
- 后端路由 (Routes)：将 AJAX 请求的 URL 映射到 CodeIgniter 控制器的一个特定方法。
- 后端控制器 (Controller)：接收前端发送的筛选参数，调用模型层方法查询数据库。
- 后端模型 (Model)：根据筛选参数执行数据库查询，并返回过滤后的数据。
- 后端控制器 (Controller)：将查询结果封装成 JSON 格式，发送回前端。
- 前端 (JavaScript)：接收到 JSON 数据后，解析数据并动态更新页面上的表格内容。
2. 前端视图 (View) 设计
首先，我们需要在视图文件中准备好表格结构和下拉菜单。为了方便 JavaScript 操作，请为下拉菜单和表格的 zuojiankuohaophpcntbody> 元素添加唯一的 id 属性。同时，引入 jQuery 库。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态数据筛选</title>
<!-- 引入 jQuery 库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
select {
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>数据实时筛选示例</h1>
<!-- 筛选下拉菜单 -->
<div class="filter-controls">
<label for="sourceFilter">按来源筛选:</label>
<select id="sourceFilter">
<option value="">所有来源</option>
<?php if (isset($sources) && $sources): ?>
<?php foreach ($sources as $source): ?>
<option value="<?php echo htmlspecialchars($source['title']); ?>">
<?php echo htmlspecialchars($source['title']); ?>
</option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<!-- 如果有多个筛选条件，可以添加更多下拉菜单，并赋予不同的ID -->
<!-- <label for="categoryFilter">按分类筛选:</label>
<select id="categoryFilter">
<option value="">所有分类</option>
...
</select> -->
</div>
<!-- 数据表格 -->
<table id="recordsTable">
<thead>
<tr>
<th width="10%">来源</th>
<!-- 根据实际数据添加更多表头 -->
<!-- <th>其他字段</th> -->
</tr>
</thead>
<tbody id="recordsTableBody">
<?php
// 初始加载的数据
if (isset($records) && count($records) > 0) {
foreach ($records as $row) {
?>
<tr>
<td><?= htmlspecialchars($row->source); ?></td>
<!-- <td><?= htmlspecialchars($row->other_field); ?></td> -->
</tr>
<?php
}
} else {
echo '<tr><td colspan="1">暂无数据</td></tr>'; // 初始无数据时的提示
}
?>
</tbody>
</table>
<!-- JavaScript 逻辑 -->
<script>
$(document).ready(function() {
// 监听下拉菜单的 change 事件
$('#sourceFilter').on('change', function() {
var selectedSource = $(this).val(); // 获取当前选中的值
// 如果有多个筛选条件，可以这样收集所有值
// var filters = {
// source: $('#sourceFilter').val(),
// category: $('#categoryFilter').val() // 假设有另一个ID为 categoryFilter 的下拉菜单
// };
// 发送 AJAX 请求
$.ajax({
url: '<?php echo base_url('ajax_dropdown'); ?>', // CodeIgniter 的 base_url 辅助函数
type: 'GET',
data: {
source: selectedSource // 将筛选值作为 GET 参数发送
// 如果有多个筛选条件，可以发送 filters 对象
// data: filters
},
dataType: 'json', // 期望服务器返回 JSON 格式的数据
beforeSend: function() {
// 请求发送前显示加载提示
$('#recordsTableBody').html('<tr><td colspan="1">加载中...</td></tr>');
},
success: function(response) {
// AJAX 请求成功后处理数据
var records = response;
var html = '';
if (records && records.length > 0) {
// 遍历数据并构建表格行
$.each(records, function(index, record) {
html += '<tr>';
html += '<td>' + htmlspecialchars(record.source) + '</td>';
// 根据实际数据添加更多列
// html += '<td>' + htmlspecialchars(record.other_field) + '</td>';
html += '</tr>';
});
} else {
html = '<tr><td colspan="1">暂无数据</td></tr>';
}
// 更新表格的 tbody 内容
$('#recordsTableBody').html(html);
},
error: function(xhr, status, error) {
// AJAX 请求失败时处理错误
console.error("AJAX Error: ", status, error);
$('#recordsTableBody').html('<tr><td colspan="1">数据加载失败，请重试。</td></tr>');
}
});
});
// JavaScript 辅助函数，用于 HTML 转义，防止 XSS
function htmlspecialchars(str) {
if (typeof str !== 'string') {
return str; // 如果不是字符串，直接返回
}
var map = {
"&": "&",
"<": "<",
">": ">",
"\"": """,
"'": "'"
};
return str.replace(/[&<>"']/g, function(m) { return map[m]; });
}
});
</script>
</body>
</html>关键点：
- id="sourceFilter"：用于 jQuery 选中下拉菜单。
- id="recordsTableBody"：用于 jQuery 动态更新表格内容。
- base_url('ajax_dropdown')：确保 AJAX 请求的 URL 正确指向 CodeIgniter 的根路径。
- dataType: 'json'：明确告知 jQuery 期望服务器返回 JSON 格式的数据。
- htmlspecialchars：在将数据插入 HTML 前进行转义，防止 XSS 攻击。
- 多下拉菜单处理：如果存在多个筛选下拉菜单，可以在 data 对象中传递所有筛选器的值，并在后端同时处理。例如 data: { source: selectedSource, category: selectedCategory }。
3. 后端路由 (Routes) 配置
在 CodeIgniter 的 application/config/routes.php 文件中，添加一条路由规则，将前端 AJAX 请求的 URL 映射到控制器的方法。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/*
| -------------------------------------------------------------------------
| URI ROUTING
| -------------------------------------------------------------------------
| This file lets you re-map URI requests to specific controller functions.
|
*/
// ... 其他路由规则 ...
// 为 AJAX 请求定义路由
$route['ajax_dropdown'] = 'your_controller/ajax_dropdown';说明：
- ajax_dropdown 是前端 AJAX 请求的 URL 片段。
- your_controller/ajax_dropdown 指向 application/controllers/Your_controller.php 文件中的 ajax_dropdown 方法。请根据你的实际控制器名称进行替换。
4. 后端控制器 (Controller) 逻辑
创建一个控制器文件（例如 application/controllers/Your_controller.php），并在其中实现 ajax_dropdown 方法，用于接收前端请求、调用模型、并返回 JSON 数据。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Your_controller extends CI_Controller {
public function __construct() {
parent::__construct();
// 载入模型，用于数据库操作
$this->load->model('your_model'); // 替换为你的模型名称
}
// 默认方法，用于加载初始视图和数据
public function index() {
// 假设这里获取初始的下拉菜单数据和表格数据
$data['sources'] = $this->your_model->get_all_sources();
$data['records'] = $this->your_model->get_all_records(); // 获取所有记录或默认记录
$this->load->view('your_view', $data); // 替换为你的视图文件
}
// 处理 AJAX 请求的方法
public function ajax_dropdown() {
// 确保请求是 AJAX 请求 (可选，但推荐)
if (!$this->input->is_ajax_request()) {
show_404(); // 如果不是 AJAX 请求，返回 404
}
// 获取前端发送的筛选参数
// $this->input->get() 方法用于获取 GET 请求参数
// TRUE 参数用于开启 XSS 过滤，提高安全性
$source_filter = $this->input->get('source', TRUE);
// 如果有多个筛选条件，可以这样获取
// $category_filter = $this->input->get('category', TRUE);
// $filters = ['source' => $source_filter, 'category' => $category_filter];
// 调用模型方法，根据筛选条件获取数据
$filtered_data = $this->your_model->get_filtered_records($source_filter); // 将筛选参数传递给模型
// 设置响应头为 JSON 格式
$this->output
->set_content_type('application/json')
->set_output(json_encode($filtered_data)); // 将数据编码为 JSON 并输出
}
}关键点：
- $this->load->model('your_model')：载入你的数据模型，以便进行数据库操作。
- $this->input->get('source', TRUE)：安全地获取名为 source 的 GET 参数。
- $this->output->set_content_type('application/json')->set_output(json_encode($filtered_data))：这是 CodeIgniter 推荐的返回 JSON 数据的方式，它会自动设置正确的 HTTP Content-Type 头。
5. 后端模型 (Model) 逻辑
创建一个模型文件（例如 application/models/Your_model.php），用于封装所有的数据库操作。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Your_model extends CI_Model {
public function __construct() {
parent::__construct();
$this->load->database(); // 载入数据库库
}
/**
* 获取所有用于下拉菜单的来源数据
* @return array
*/
public function get_all_sources() {
// 假设你的数据表中有一个 'title' 字段表示来源名称
$this->db->select('DISTINCT(title) as title');
$this->db->from('your_table_name'); // 替换为你的数据表名
$query = $this->db->get();
return $query->result_array(); // 返回数组，方便在视图中 foreach
}
/**
* 获取所有记录 (用于初始加载)
* @return array
*/
public function get_all_records() {
$query = $this->db->get('your_table_name'); // 替换为你的数据表名
return $query->result(); // 返回对象数组
}
/**
* 根据筛选条件获取记录
* @param string|null $source_filter 来源筛选值
* @return array
*/
public function get_filtered_records($source_filter = null) {
$this->db->select('source'); // 选择你需要展示的字段
// 如果有其他字段，可以添加：$this->db->select(' 
