如何在HTML与PHP标签中调用脚本返回的数据？

1. 后端控制器逻辑 #

在你的控制器（比如FormController.php）中添加处理AJAX请求的方法，用于根据第一个下拉框的值返回第二个下拉框的选项数据：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class FormController extends CI_Controller {

    // 加载表单页面
    public function index() {
        // 渲染第一个下拉框的初始数据（示例为分类数据）
        $data['first_options'] = $this->db->get('categories')->result_array();
        $this->load->view('form_view', $data);
    }

    // 处理AJAX请求，返回联动选项
    public function get_second_options() {
        // 获取第一个下拉框选中的值
        $category_id = $this->input->post('category_id');
        
        // 根据选中值查询关联数据（示例为产品数据）
        $this->db->where('category_id', $category_id);
        $second_options = $this->db->get('products')->result_array();
        
        // 返回JSON格式结果
        echo json_encode($second_options);
        exit; // 终止输出，避免CI返回额外内容
    }
}
?>

2. 前端视图实现 #

在视图文件（form_view.php）中编写表单结构与联动逻辑：

<!-- 第一个下拉框 -->
<select id="first-dropdown" onchange="myFunction(this.value)">
    <option value="">请选择分类</option>
    <?php foreach($first_options as $option): ?>
        <option value="<?php echo $option['id']; ?>"><?php echo $option['name']; ?></option>
    <?php endforeach; ?>
</select>

<!-- 第二个联动下拉框 -->
<select id="second-dropdown">
    <option value="">请先选择分类</option>
</select>

<!-- jQuery依赖（可替换为本地文件） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function myFunction(category_id) {
    // 重置第二个下拉框状态
    $('#second-dropdown').html('<option value="">加载中...</option>');
    
    if(category_id === '') {
        $('#second-dropdown').html('<option value="">请先选择分类</option>');
        return;
    }
    
    // 发送AJAX请求
    $.ajax({
        url: '<?php echo base_url("FormController/get_second_options"); ?>',
        type: 'POST',
        data: {
            category_id: category_id,
            // 携带CI的CSRF令牌，避免请求被拦截
            <?php echo $this->security->get_csrf_token_name(); ?>: '<?php echo $this->security->get_csrf_hash(); ?>'
        },
        dataType: 'json',
        success: function(response) {
            // 渲染第二个下拉框的选项
            let options = '<option value="">请选择产品</option>';
            if(response.length > 0) {
                response.forEach(item => {
                    options += `<option value="${item.id}">${item.name}</option>`;
                });
            }
            $('#second-dropdown').html(options);
        },
        error: function() {
            $('#second-dropdown').html('<option value="">加载失败，请重试</option>');
        }
    });
}
</script>

核心注意事项 #

• CSRF保护：若CI开启了CSRF（默认开启），必须在AJAX请求中携带令牌，否则请求会被拒绝。
• 业务适配：示例中的categories和products表需替换为你实际的业务表结构。
• 原生JS替代：如果不想用jQuery，可改用原生XMLHttpRequest实现AJAX，逻辑一致。

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