CodeIgniter框架Select选项onChange时数据库数据获取异常求助

先帮你梳理下当前代码里的几个核心问题，然后一步步解决：

一、核心问题点 #

• AJAX请求未处理响应：你只发送了POST请求，但没接收控制器返回的数据，自然没法更新文本框
• POST参数名不匹配：视图里select的name是items_goods，但控制器里写了$this->input->post('item_goods')（少了一个s）
• 模型数据处理错误：模型返回的是Query对象，不是直接可用的数组，需要提取数据
• FlashData不适合AJAX场景：FlashData是针对页面刷新的请求，AJAX是异步无刷新，完全起不到作用
• 视图语法错误：文本框的value写法<?=echo $item_goods" >语法混乱，根本无法正确渲染

二、分步修复代码 #

1. 修复控制器代码 #

修改new_sale方法，区分AJAX请求和普通页面请求，处理参数并返回JSON数据（AJAX需要接收JSON格式的响应）：

public function new_sale(){
    // 处理AJAX异步请求
    if($this->input->is_ajax_request()){
        $item_id = $this->input->post('items_goods');
        // 获取商品数据，注意提取模型返回的数组
        $item_data = $this->interface_model->get_item_data_by_id($item_id)->row_array();
        // 返回JSON格式的价格数据
        echo json_encode(['price' => $item_data['price'] ?? '']);
        exit; // 结束请求，避免加载视图
    }

    // 普通页面请求，加载初始数据
    $data['title']='Add sale';
    $data['items']=$this->interface_model->get_item_data();
    $this->load->view('templates/header_interfaces');
    $this->load->view('interfaces/new_sale', $data);
    $this->load->view('templates/footer_interfaces');
}

2. 修复模型代码 #

优化查询，直接返回可用的单条数据数组：

public function get_item_data_by_id($item_id){
    $this->db->select('price'); // 只查询需要的价格字段，提升性能
    $this->db->from('stock');
    $this->db->where('id',$item_id);
    $query = $this->db->get();
    return $query->row_array(); // 返回单条数据的关联数组
}

3. 修复视图代码 #

修正文本框的语法错误，添加readonly防止手动修改：

<td>
    <select class="form-control" id="items_goods" name="items_goods" style="width:150px;">
        <option value="none" selected disabled>Select Item</option>
        <?php foreach ($items as $item):?>
            <option value="<?php echo $item['id'];?>"><?php echo $item['item_name']; ?></option>
        <?php endforeach;?>
    </select>
</td>
<td>
    <input type="text" name="price" id="price" value="" readonly>
</td>

4. 修复AJAX脚本 #

添加成功回调，接收返回的JSON并更新文本框：

$('#items_goods').change(function(){
    var items_goods = $(this).val(); // 简化写法，避免重复选择DOM
    if(items_goods === 'none'){
        $('#price').val(''); // 选默认项时清空价格
        return;
    }
    $.ajax({
        url: "<?php echo site_url('your_controller_name/new_sale'); ?>", // 替换为实际控制器名，生成绝对路径
        data: {items_goods: items_goods },
        type: 'post',
        dataType: 'json', // 指定接收JSON格式
        success: function(response){
            $('#price').val(response.price); // 更新文本框内容
        },
        error: function(){
            alert('Failed to fetch item price'); // 错误提示
        }
    });
});

三、替代实现方案（无需AJAX，更高效） #

如果商品数据量不大，可以把价格直接存在select的option自定义属性里，前端直接读取，不用发后端请求：

视图修改： #

<select class="form-control" id="items_goods" name="items_goods" style="width:150px;">
    <option value="none" selected disabled>Select Item</option>
    <?php foreach ($items as $item):?>
        <option value="<?php echo $item['id'];?>" data-price="<?php echo $item['price'];?>">
            <?php echo $item['item_name']; ?>
        </option>
    <?php endforeach;?>
</select>

脚本修改： #

$('#items_goods').change(function(){
    var selectedOption = $(this).find('option:selected');
    var price = selectedOption.data('price') || '';
    $('#price').val(price);
});

这个方案不需要后端请求，响应更快，避免了AJAX的网络开销，适合数据量小的场景。

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