在现代web应用中，用户对交互体验的要求越来越高。传统的表单提交方式在数据过滤场景下会导致页面刷新，影响用户流畅度。通过引入ajax（asynchronous javascript and xml）技术，我们可以在不重新加载整个页面的情况下，与服务器进行数据交换，从而实现实时、动态的数据更新。本文将以codeigniter框架为例，详细演示如何构建一个支持多下拉菜单联动的实时数据过滤系统。
核心概念
在深入实现之前，理解几个核心概念至关重要：
- AJAX (Asynchronous JavaScript and XML): 一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它允许网页在后台与服务器交换数据，并在不干扰现有显示和行为的情况下更新页面。
- jQuery: 一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历、事件处理、动画和Ajax交互变得更加简单，具有易于使用的API，可跨多种浏览器运行。
- CodeIgniter MVC: CodeIgniter是一个轻量级的PHP框架，采用MVC（Model-View-Controller）架构模式，有助于分离应用程序的逻辑、数据和用户界面。
后端实现：CodeIgniter MVC
后端主要负责接收前端的过滤请求，根据请求参数查询数据库，并将过滤后的数据以JSON格式返回。
1. 路由配置 (application/config/routes.php)
首先，我们需要定义一个路由，将前端的AJAX请求映射到控制器中的特定方法。这使得AJAX请求的URL更加清晰和易于管理。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
// ... 其他路由配置 ...
// 定义AJAX数据过滤的路由
$route['ajax_filter_data'] = 'data_controller/filter_records';
// 您可以根据实际需求修改 'ajax_filter_data' 和 'data_controller/filter_records'2. 控制器逻辑 (application/controllers/Data_Controller.php)
创建一个控制器来处理AJAX请求。此控制器将接收前端发送的过滤参数，调用模型获取数据，并将其编码为JSON返回。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Data_Controller extends CI_Controller {
public function __construct() {
parent::__construct();
// 加载模型（假设您的模型名为 Data_Model）
$this->load->model('data_model');
}
// 处理AJAX数据过滤请求的方法
public function filter_records() {
// 获取前端通过GET方法传递的过滤参数
// 这里的 'source_filter' 应该与前端AJAX请求中的参数名对应
$source_filter = $this->input->get('source_filter', TRUE); // TRUE 表示进行XSS过滤
// 如果有多个下拉菜单，可以获取更多参数
// $another_filter = $this->input->get('another_filter', TRUE);
// 调用模型方法，根据过滤参数获取数据
// 假设 Data_Model 中有一个 get_filtered_records 方法
$filtered_data = $this->data_model->get_filtered_records($source_filter);
// 将数据编码为JSON格式并输出
header('Content-Type: application/json'); // 设置响应头为JSON
echo json_encode($filtered_data);
}
// 初始页面加载方法，用于显示包含表格和下拉菜单的视图
public function index() {
// 获取所有数据和下拉菜单选项，用于初次加载
$data['sources'] = $this->data_model->get_all_sources();
$data['records'] = $this->data_model->get_all_records(); // 初始显示所有记录
$this->load->view('data_view', $data);
}
}
