CodeIgniter框架下实现选中数据动态展示的方法求助

我来帮你搞定这个动态切换Shelter数据的需求！咱们从后端接口调整、模型优化到前端交互一步步来实现，让你能点击不同的选择按钮，下方区域自动刷新对应的数据。

一、调整Controller：新增AJAX接口+优化首页逻辑 #

首先咱们要修改你的index方法，不用提前固定获取索引为1的数据，而是把所有Shelter的列表传给视图，同时新增一个专门处理AJAX请求的方法，用来根据选中的Shelter ID返回对应的数据：

public function index() {
    // 获取所有Shelter数据
    $shelter_list = $this->M_shelter->id();
    $data['shelter_list'] = $shelter_list;
    
    // 默认加载第一个Shelter的数据（可选，也可以留空让用户选择后再加载）
    if (!empty($shelter_list)) {
        $first_shelter = $shelter_list[0];
        $all_data = $this->M_shelter->pengukuran($first_shelter->id_shelter, $first_shelter->nama_shelter);
        $data['current_data'] = !empty($all_data) ? $all_data[0] : null;
    } else {
        $data['current_data'] = null;
    }

    $data['page'] = "home";
    $data['judul'] = "Beranda";
    $data['deskripsi'] = "Site managament system";
    $this->template->views('home', $data);
}

// 新增AJAX接口，用于获取指定Shelter的数据
public function get_shelter_data() {
    // 拒绝非AJAX直接访问
    if (!$this->input->is_ajax_request()) {
        show_404();
    }

    $id_shelter = $this->input->post('id_shelter');
    $nama_shelter = $this->input->post('nama_shelter');

    if (empty($id_shelter) || empty($nama_shelter)) {
        echo json_encode(['status' => 'error', 'message' => '参数缺失']);
        return;
    }

    $shelter_data = $this->M_shelter->pengukuran($id_shelter, $nama_shelter);
    if (!empty($shelter_data)) {
        echo json_encode(['status' => 'success', 'data' => $shelter_data[0]]);
    } else {
        echo json_encode(['status' => 'error', 'message' => '未找到对应数据']);
    }
}

二、优化Model：避免SQL注入（重要！） #

你原来的Model里直接把变量拼进SQL，很容易出现SQL注入漏洞，咱们改成CodeIgniter的参数绑定方式，同时用JOIN语法让SQL更清晰：

public function pengukuran($id_shelter, $nama_shelter) {
    $sql = "SELECT 
                pengukuran.id_shelter, 
                pengukuran.nama_shelter, 
                parameter.suhu, 
                parameter.tegAC, 
                parameter.tegDC, 
                parameter.arusAC, 
                parameter.arusDC, 
                parameter.kondisi_pintu, 
                parameter.kondisi_gas 
            FROM parameter
            JOIN pengukuran ON parameter.id_shelter = pengukuran.id_shelter
            JOIN shelter ON pengukuran.nama_shelter = shelter.nama_shelter
            WHERE pengukuran.id_shelter = ? 
              AND pengukuran.nama_shelter = ?";
    
    // 使用参数绑定，彻底杜绝SQL注入风险
    $data = $this->db->query($sql, [$id_shelter, $nama_shelter]);
    return $data->result();
}

三、前端视图（home.php）：实现点击切换逻辑 #

现在咱们在视图里渲染Shelter选择按钮，然后用jQuery实现AJAX点击切换，实时更新下方的数据展示区域：

<!-- Shelter选择按钮组 -->
<div class="shelter-selector">
    <?php foreach ($shelter_list as $shelter): ?>
        <button class="shelter-btn active" data-id="<?= $shelter->id_shelter ?>" data-name="<?= $shelter->nama_shelter ?>">
            <?= $shelter->nama_shelter ?>
        </button>
    <?php endforeach; ?>
</div>

<!-- 数据展示容器 -->
<div id="shelter-data-display">
    <?php if ($current_data): ?>
        <div class="data-card">
            <h3><?= $current_data->nama_shelter ?> 实时数据</h3>
            <ul>
                <li>温度：<strong><?= $current_data->suhu ?></strong></li>
                <li>AC电压：<strong><?= $current_data->tegAC ?></strong></li>
                <li>DC电压：<strong><?= $current_data->tegDC ?></strong></li>
                <li>AC电流：<strong><?= $current_data->arusAC ?></strong></li>
                <li>DC电流：<strong><?= $current_data->arusDC ?></strong></li>
                <li>气体状态：<strong><?= $current_data->kondisi_gas ?></strong></li>
                <li>门状态：<strong><?= $current_data->kondisi_pintu ?></strong></li>
            </ul>
        </div>
    <?php else: ?>
        <p class="empty-tip">请选择一个Shelter查看数据</p>
    <?php endif; ?>
</div>

<!-- 引入jQuery（如果模板未全局引入） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
    // 点击Shelter按钮触发数据切换
    $('.shelter-btn').click(function() {
        // 高亮当前选中按钮
        $('.shelter-btn').removeClass('active');
        $(this).addClass('active');

        var id = $(this).data('id');
        var name = $(this).data('name');

        // 发送AJAX请求获取数据
        $.ajax({
            url: '<?= base_url("你的控制器名/get_shelter_data") ?>', // 替换为实际控制器名
            type: 'POST',
            data: {id_shelter: id, nama_shelter: name},
            dataType: 'json',
            beforeSend: function() {
                $('#shelter-data-display').html('<p>加载中...</p>');
            },
            success: function(res) {
                if (res.status === 'success') {
                    var d = res.data;
                    var html = `
                        <div class="data-card">
                            <h3>${d.nama_shelter} 实时数据</h3>
                            <ul>
                                <li>温度：<strong>${d.suhu}</strong></li>
                                <li>AC电压：<strong>${d.tegAC}</strong></li>
                                <li>DC电压：<strong>${d.tegDC}</strong></li>
                                <li>AC电流：<strong>${d.arusAC}</strong></li>
                                <li>DC电流：<strong>${d.arusDC}</strong></li>
                                <li>气体状态：<strong>${d.kondisi_gas}</strong></li>
                                <li>门状态：<strong>${d.kondisi_pintu}</strong></li>
                            </ul>
                        </div>
                    `;
                    $('#shelter-data-display').html(html);
                } else {
                    $('#shelter-data-display').html(`<p class="error-tip">${res.message}</p>`);
                }
            },
            error: function() {
                $('#shelter-data-display').html('<p class="error-tip">数据加载失败，请重试</p>');
            }
        });
    });
});
</script>

✨ 小提示：记得把<?= base_url("你的控制器名/get_shelter_data") ?>里的「你的控制器名」替换成你实际的Controller类名哦！

额外优化建议 #

• 给选中的按钮加个高亮样式，让用户直观看到当前选择项；
• 如果不需要兼容老浏览器，可以用原生JS的fetch替代jQuery；
• 可以给数据展示区域加个加载动画，提升用户体验。

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