CodeIgniter AJAX 下拉过滤教程

作者：小宇宙叶知秋时间：2025-12-09 来源：正软商城浏览：2

本文档详细介绍了如何在CodeIgniter框架中使用AJAX和下拉菜单实现数据的实时过滤。通过监听下拉菜单的change事件，发送AJAX请求到服务器，根据选择的下拉菜单值动态更新表格数据，从而提供更流畅的用户体验。

本文目录

使用下拉菜单实时过滤数据：CodeIgniter + AJAX 教程

本文档详细介绍了如何在 CodeIgniter 框架中使用 AJAX 和下拉菜单实现数据的实时过滤。通过监听下拉菜单的 change 事件，发送 AJAX 请求到服务器，根据选择的下拉菜单值动态更新表格数据，从而提供更流畅的用户体验。

1. 路由配置

首先，需要在 CodeIgniter 的 routes.php 文件中配置路由，将 AJAX 请求映射到对应的控制器方法。

$route['ajax_dropdown'] = 'your_controller/your_function'; // 将 ajax_dropdown 替换为你想要的路由名称

请将 your_controller 替换为你的控制器名称，your_function 替换为处理 AJAX 请求的方法名。

2. 控制器实现

接下来，在控制器中实现处理 AJAX 请求的方法。该方法需要获取下拉菜单的值，根据该值查询数据库，并将结果以 JSON 格式返回。

input->get('your_input_name'); // 获取 jQuery GET 请求传递的参数值
        $data = array(); // 用于存储数据的数组

        // 根据 $input_value 查询数据库，获取过滤后的数据
        // 示例：
        // $this->load->model('Your_model');
        // $data['filtered_records'] = $this->Your_model->get_filtered_records($input_value);

        // 将数据转换为 JSON 格式并输出
        echo json_encode($data);
    }
}
?>

说明：

$this->input->get('your_input_name')：获取通过 GET 请求传递的参数值，your_input_name 需要与前端 AJAX 请求中传递的参数名保持一致。
$data = array()：创建一个空数组，用于存储从数据库查询到的数据。
echo json_encode($data)：将 $data 数组转换为 JSON 格式的字符串，并输出到浏览器。

注意事项：

需要根据实际情况修改数据库查询逻辑。
确保在控制器中加载了对应的模型。
在实际项目中，需要对输入参数进行安全验证，防止 SQL 注入等安全问题。

3. 视图实现

在视图中，需要创建下拉菜单，并使用 JavaScript 监听下拉菜单的 change 事件，发送 AJAX 请求到服务器，并根据服务器返回的数据更新表格。

 0) {
            foreach ($records as $row) {
        ?>
                
    
        Source
    
    
        
            
        
    
    

        
                    source ?>

Source

source ?>

说明：

$('#your_id_name').on('change', function() { ... });：监听 id 为 your_id_name 的下拉菜单的 change 事件。
var selectedValue = $(this).val();：获取选中的下拉菜单值。
$.get('', { ... }, function(res) { ... });：发送 AJAX GET 请求到服务器。
- ''：服务器端点 URL，使用 CodeIgniter 的 base_url() 函数生成。
- { your_input_name: selectedValue }：将选中的下拉菜单值作为参数传递给服务器。your_input_name 需要与控制器中接收参数的名称保持一致。
- function(res) { ... }：回调函数，在服务器返回数据后执行。
var values = JSON.parse(res);：将服务器返回的 JSON 字符串转换为 JavaScript 对象。
$('#table_body').empty();：清空表格 tbody 中的所有内容。
$.each(values, function(index, row) { ... });：遍历服务器返回的数据，并根据数据动态生成表格行。