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 操作，请为下拉菜单和表格的
元素添加唯一的 id 属性。同时，引入 jQuery 库。
动态数据筛选
数据实时筛选示例
| 来源 |
|---|
| source); ?> | 暂无数据 | '; // 初始无数据时的提示 } ?>
关键点：
- 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 映射到控制器的方法。
说明：
- 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 数据。
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），用于封装所有的数据库操作。
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(' 
