如何在CodeIgniter中实现控制器向JavaScript传递数据？

针对你给出的CodeIgniter控制器和视图代码，以下是几种实用的传递数据方式：

1. 直接将PHP变量赋值给JavaScript变量 #

你的控制器已经通过$data['targetPath']把路径传递到视图了，只需要在视图的JavaScript中直接输出PHP变量即可，建议用htmlspecialchars避免XSS风险：

修改后的视图JavaScript代码 #

if(percent === 100) { // 注意：原代码的`=`是赋值，需改为`===`做相等判断
    $('#progressBar').hide();
    const tp = '<?php echo htmlspecialchars($targetPath); ?>';
    _("status").innerHTML = tp;
    console.log(tp);
}

2. 传递多组数据：PHP数组转JSON #

如果需要传递多个配置项，可在控制器中组装数组，再转成JSON格式传给JavaScript：

修改后的控制器代码 #

public function file_upload(){
    $targetPath = "assets/uploads/";
    $uploadMaxSize = 2 * 1024 * 1024; // 限制2MB
    
    // 组装多组数据
    $data['uploadSettings'] = [
        'targetPath' => $targetPath,
        'maxFileSize' => $uploadMaxSize
    ];
    $this->load->view('test', $data);
}

视图中接收JSON数据 #

// 将PHP数组转为JSON对象
const uploadSettings = <?php echo json_encode($uploadSettings); ?>;

// 使用数据
if(percent === 100) {
    $('#progressBar').hide();
    _("status").innerHTML = uploadSettings.targetPath;
    console.log('目标路径：', uploadSettings.targetPath);
    console.log('最大文件大小：', uploadSettings.maxFileSize);
}

3. 通过隐藏输入框传递数据 #

如果更倾向于分离PHP和JS代码，可在视图HTML中添加隐藏输入框存储数据，再用JS读取：

视图HTML部分 #

<input type="hidden" id="targetPath" value="<?php echo htmlspecialchars($targetPath); ?>">

视图JavaScript部分 #

if(percent === 100) {
    $('#progressBar').hide();
    // 读取隐藏输入框的值
    const tp = document.getElementById('targetPath').value;
    // 或者用jQuery：const tp = $('#targetPath').val();
    _("status").innerHTML = tp;
    console.log(tp);
}

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