Codeigniter中如何通过单次Ajax调用填充5个非关联下拉列表

你完全可以通过单次Ajax请求实现所有下拉列表的填充，相比多次请求可减少70%以上的请求开销，避免多余的TCP连接握手、服务器请求解析损耗，也能降低带宽占用。具体实现步骤如下：

在你的Pharmacy_elements控制器中新增一个统一获取所有下拉数据的方法，代码如下：

public function fetch_all_dropdowns()
{
    $this->load->model('Pharmacy_model');
    $result = [];

    // 生成主分类下拉HTML
    $main_cat_html = '';
    $main_data = $this->Pharmacy_model->fetch_main_catagories();
    if($main_data->num_rows()>0){
        foreach($main_data->result() as $row){
            $main_cat_html .= '<option value="'.$row->id.'">'.$row->category_name.'</option>';
        }
    }
    $result['main_catagory'] = $main_cat_html;

    // 生成子分类下拉HTML
    $sub_cat_html = '';
    $sub_data = $this->Pharmacy_model->fetch_sub_catagories();
    if($sub_data->num_rows()>0){
        foreach($sub_data->result() as $row){
            $sub_cat_html .= '<option value="'.$row->category_id.'">'.$row->category_name.'</option>';
        }
    }
    $result['sub_catagory'] = $sub_cat_html;

    // 生成剂型下拉HTML
    $serving_html = '';
    $serving_data = $this->Pharmacy_model->fetch_serving_types();
    if($serving_data->num_rows()>0){
        foreach($serving_data->result() as $row){
            // 可根据实际业务字段调整取值
            $serving_html .= '<option value="'.$row->id.'">'.$row->name.'</option>';
        }
    }
    $result['common_serving_type'] = $serving_html;

    // 生成供应商下拉HTML
    $supplier_html = '';
    $supplier_data = $this->Pharmacy_model->fetch_approved_suppliers();
    if($supplier_data->num_rows()>0){
        foreach($supplier_data->result() as $row){
            $supplier_html .= '<option value="'.$row->id.'">'.$row->supplier_name.'</option>';
        }
    }
    $result['supplier_name'] = $supplier_html;

    // 生成母公司下拉HTML（有需要就保留）
    $mother_html = '';
    $mother_data = $this->Pharmacy_model->fetch_mother_companies();
    if($mother_data->num_rows()>0){
        foreach($mother_data->result() as $row){
            $mother_html .= '<option value="'.$row->id.'">'.$row->company_name.'</option>';
        }
    }
    $result['mother_company'] = $mother_html;

    // 返回JSON格式数据
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($result));
}

把原来$(document).ready里的5个Ajax请求全部删掉，替换为单次请求：

$(document).ready(function() {
    $.ajax({
        url:"<?php echo base_url(); ?>index.php/Pharmacy_elements/fetch_all_dropdowns",
        method:'get',
        cache: false, // 自动添加时间戳防止缓存，代替你原有语法错误的headers配置
        success:function(res){
            // 批量赋值给对应下拉列表
            $('#main_catagory').html(res.main_catagory);
            $('#sub_catagory').html(res.sub_catagory);
            $('#common_serving_type').html(res.common_serving_type);
            $('#supplier_name').html(res.supplier_name);
            // 如果需要填充母公司下拉，打开下方注释即可
            // $('#mother_company').html(res.mother_company);
        }
    })
})

• 如果下拉数据属于更新频率很低的基础数据，可以在第一次请求后将数据缓存到localStorage，同时设置过期时间，后续页面加载时优先读取本地缓存，无需重复发起请求
• 若你的下拉存在联动逻辑，也可以基于这个方案扩展，触发联动时只请求关联的下拉数据即可

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