CodeIgniter 中基于 AJAX 的实时下拉菜单数据过滤教程

核心原理

核心原理在于利用异步 javascript 和 xml (ajax) 技术。当用户在前端视图的下拉菜单中选择一个选项时，javascript（通常使用 jquery）会捕获这个 change 事件，并向服务器发送一个 ajax 请求。这个请求会携带用户选择的过滤条件。codeigniter 后端控制器接收到请求后，会调用模型层获取符合条件的数据，然后将数据以 json 格式返回给前端。前端 javascript 接收到 json 数据后，动态更新页面的表格内容，从而实现无刷新过滤。

实现步骤

我们将从前端到后端，逐步构建这个实时过滤功能。

1. 视图层 (View Layer) - HTML & JavaScript

首先，我们需要修改视图文件 (.php 文件) 来包含下拉菜单和表格，并添加必要的 JavaScript 代码。

百度AI搜

百度全新AI搜索引擎

下载

• HTML 结构： 为 select 元素添加一个唯一的 id，以便 jQuery 能够准确地选中它。同时，为了方便 AJAX 响应后更新表格，建议给 <tbody> 也添加一个 id。

  <!-- application/views/your_view.php -->
  <table>
      <thead>
          <tr>
              <th width="10%">Source</th>
          </tr>
          <tr>
              <td width="5%">
                  <select id="sourceFilter"> <!-- 添加ID -->
                      <option value="">All </option>
                      <?php if ($sources) foreach ($sources as $source) : ?>
                          <option value="<?php echo $source['title'] ?>"><?php echo $source['title'] ?></option>
                      <?php endforeach; ?>
                  </select>
              </td>
          </tr>
      </thead>
      <tbody id="recordsTableBody"> <!-- 添加ID以便更新 -->
          <?php
          if (isset($records) && count($records) > 0) {
              foreach ($records as $row) {
          ?>
                  <tr>
                      <td><?= $row->source ?></td>
                  </tr>
          <?php }
          } else { ?>
              <tr>
                  <td colspan="1">暂无数据</td>
              </tr>
          <?php } ?>
      </tbody>
  </table>

• JavaScript (jQuery AJAX): 在视图文件的底部，引入 jQuery 库，并编写 JavaScript 代码来监听下拉菜单的 change 事件，并发送 AJAX 请求。

  <!-- 引入 jQuery 库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
      $(document).ready(function() {
          // 监听下拉菜单的 'change' 事件
          $('#sourceFilter').on('change', function() {
              var selectedSource = $(this).val(); // 获取当前选中的值
  
              // 发送 AJAX GET 请求
              $.get('<?php echo base_url('ajax_filter_records'); ?>', {
                  source: selectedSource // 将选中的值作为参数发送
              }, function(response) {
                  // 请求成功后的回调函数
                  var filteredRecords = JSON.parse(response); // 解析 JSON 响应
  
                  // 清空当前表格体
                  $('#recordsTableBody').empty();
  
                  // 遍历过滤后的数据，并重新填充表格
                  if (filteredRecords.length > 0) {
                      $.each(filteredRecords, function(index, record) {
                          $('#recordsTableBody').append(
                              '<tr><td>' + record.source + '</td></tr>'
                          );
                      });
                  } else {
                      $('#recordsTableBody').append('<tr><td colspan="1">没有找到匹配的数据。</td></tr>');
                  }
              }).fail(function(jqXHR, textStatus, errorThrown) {
                  // 请求失败时的处理
                  console.error("AJAX 请求失败: " + textStatus, errorThrown);
                  $('#recordsTableBody').empty().append('<tr><td colspan="1">数据加载失败，请稍后再试。</td></tr>');
              });
          });
      });
  </script>
  

  代码解释：

  • $('#sourceFilter').on('change', function() { ... });：当 ID 为 sourceFilter 的下拉菜单值改变时触发。
  • `$(this).