Codeigniter4通过AJAX将下拉框选中值传递至控制器

现有代码无法传值的两个关键问题：

• 下拉菜单默认提示项未设置value属性，选中首项时获取到的是文本Choose...而非有效ID
• 控制器端未接收前端GET请求传递的参数，始终使用硬编码的静态值1做查询

1. 视图层下拉框修正 #

给默认提示项补全属性，避免无效值提交：

<div class="form-group col-md-4">
   <div class="input-group">
      <select class="custom-select" name="sec_id" id="sec-id" required>
         <option value="" selected disabled>Choose...</option>
         <option value="7">TBA_07</option>
         <option value="8">TBA_08</option>
         <option value="9">TBA_09</option>
         <option value="10">TBA_10</option>
      </select>
      <div class="input-group-append">
         <button class="btn btn-primary" id="load-data" type="button">Enter</button>
      </div>
   </div>
</div>
<div class="card">
   <div class="card-body">
      <div class="table-responsive">
         <table class="table table-sm">
            <thead>
               <tr>
                  <th>Subject ID</th>
                  <th>Subject Name</th>
                  <th>No. of Credits</th>
                  <th>Section Name</th>
               </tr>
            </thead>
            <tbody id="data_subj">
            </tbody>
         </table>
      </div>
   </div>
</div>

*修正点：给默认选项加disabled属性禁止用户误选，设置空value方便前端做非空校验，同时删掉了thead里重复的<tr>标签避免DOM结构异常。

2. 控制器层参数接收修正 #

替换硬编码值，从请求对象中获取前端传递的参数，增加合法性校验：

public function Get_Subj_Load(){
    // 从GET请求中获取sec_id参数，强制转整数类型，默认值设为0
    $sec_id = (int)$this->request->getGet('sec_id');
    // 参数非法时直接返回空结果，避免无效SQL查询
    if ($sec_id < 1) {
        return $this->response->setJSON(['subj' => []]);
    }
    $builder = $this->db->table("stud_admission as sa");
    $builder->select('su.sub_id, su.sub_name, su.sub_no_credit, se.sec_name, sa.sa_level');
    $builder->join('section as se', 'se.sec_id = sa.sec_id');
    $builder->join('subjects as su', 'su.sec_id = sa.sec_id');
    $builder->where('sa.sec_id', $sec_id);
    $data['subj'] = $builder->get()->getResultArray();

    return $this->response->setJSON($data);
}

*注意：确认路由配置中/Get-Subject-Load路径已正确映射到该控制器方法，若框架未开启自动路由转换，需手动添加路由规则。

3. AJAX逻辑补全 #

增加参数校验、返回类型声明和异常处理，避免无效请求：

$(document).ready(function(){
  $("#load-data").click(function(){
    const sec_id = $("#sec-id").val();
    // 未选中有效选项时直接提示，终止请求
    if (!sec_id) {
      alert('请先选择对应Section');
      return;
    }
    // 清空表格旧数据
    $('#data_subj').empty();

    $.ajax({
      method: "GET",
      url: "<?php echo site_url(); ?>/Get-Subject-Load",
      data: {sec_id: sec_id},
      dataType: 'json', // 显式声明返回数据格式，避免jQuery解析异常
      success: function(response){
        // 无数据时显示提示
        if (!response.subj || response.subj.length === 0) {
          $('#data_subj').append('<tr><td colspan="4" class="text-center">暂无对应科目数据</td></tr>');
          return;
        }
        // 渲染数据行
        $.each(response.subj, function(key, value){
          $('#data_subj').append(`<tr>
            <td>${value.sub_id}</td>
            <td>${value.sub_name}</td>
            <td>${value.sub_no_credit}</td>
            <td>${value.sec_name}</td>
          </tr>`);
        });
      },
      error: function(){
        alert('数据加载失败，请刷新页面后重试');
      }
    });
  });
});

• 打开浏览器开发者工具「网络」面板，点击Enter按钮后查看对应请求，确认URL查询参数中携带了正确的sec_id=选中项数字值
• 切换不同下拉选项时，在控制台执行$("#sec-id").val()可拿到对应数字value，而非显示文本
• 控制器端打印$sec_id可正常获取前端传递的动态值，查询结果随选中项变化

内容的提问来源于stack exchange，提问作者cjwrk