JavaScript中调用PHP变量失效，使用json_encode仍无法获取选中CSV路径绘图

• 变量构造逻辑完全错误：原代码中$graphen是带<br />HTML标签的拼接字符串，既不是纯文件路径，也不是结构化的数组，JSON编码后传给JS的是带HTML标签的无效URL，根本无法作为AJAX请求地址使用。
• 路径类型混淆：代码里拼接的/var/www/html/是服务器本地文件系统的绝对路径，不是浏览器可访问的HTTP URL路径，直接拿这个路径发AJAX请求必然返回404。
• 硬中断逻辑打断渲染：原代码中未选文件、目录打开失败的分支直接调用exit()，会中断后续所有HTML和JS的渲染流程，导致页面结构残缺。
• JSON编码兼容问题：原代码未指定JSON编码的处理参数，遇到中文文件名、特殊字符时会输出无效内容，直接触发JS语法报错。
• JS逻辑不匹配多选场景：原代码的AJAX逻辑只适配单个文件路径，和用户勾选多个CSV的交互需求不匹配。

1. 拆分展示逻辑和传值逻辑
   • 单独定义一个数组存储选中文件的Web可访问纯路径，不要把HTML标签拼进传值用的变量
   • 页面上的提示文本单独存变量，专门用来做内容展示，和传给JS的数据完全隔离
   • 路径拼接时做安全校验：用basename()过滤文件名，避免路径穿越风险；对应Web根路径和服务器本地路径的映射，不要混用本地文件路径
2. 优化JSON输出兼容性
   调用json_encode()时指定参数JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_UNESCAPED_UNICODE，避免中文、斜杠、特殊字符转义异常
3. 补全JS端的容错逻辑
   • 先判断传过来的文件路径数组是否为空，空数组时不发AJAX请求
   • 对请求URL做编码处理，避免文件名带空格、特殊字符时请求失败
   • 增加AJAX错误捕获，请求失败时输出日志，不阻塞后续流程

PHP部分 #

<?php
// 本地文件系统路径（用于遍历文件）
$local_base_dir = '/var/www/html/';
// 对应Web可访问的根路径（用于生成AJAX请求地址）
$web_base_path = '/';
$selected_file_urls = []; // 纯路径数组，专门传给JS
$page_notice = ''; // 展示用的提示文本

if (!isset($_POST['submit'])) { 
    if ($dp = opendir($local_base_dir)) { 
        $files = []; 
        while (($file = readdir($dp)) !== false) { 
            // 仅筛选CSV文件，减少无效选项
            if (!is_dir($local_base_dir . $file) && pathinfo($file, PATHINFO_EXTENSION) === 'csv') { 
                $files[] = $file; 
            } 
        } 
        closedir($dp); 
    } else { 
        $page_notice = '目录打开失败';
    } 
    if (!empty($files)) { 
        echo '<form action="' . htmlspecialchars($_SERVER['PHP_SELF']) . '" method="post">'; 
        foreach ($files as $file) { 
            echo '<input type="checkbox" name="files[]" value="' . htmlspecialchars($file) . '" /> ' . 
                htmlspecialchars($file) . '<br />'; 
        } 
        echo '<input type="submit" name="submit" value="提交选择" /></form>'; 
    } else { 
        $page_notice = '目录下未找到CSV文件'; 
    } 
} else { 
    if (isset($_POST['files']) && is_array($_POST['files'])) { 
        foreach ($_POST['files'] as $value) {
            // 过滤文件名风险，生成纯Web路径
            $safe_file_name = basename($value);
            $selected_file_urls[] = $web_base_path . $safe_file_name;
            $page_notice .= '已选择文件：' . htmlspecialchars($safe_file_name) . '<br />';
        } 
    } else { 
        $page_notice = '未选择任何文件'; 
    }
} 
// 输出展示提示，不中断页面渲染
echo '<div class="notice">' . $page_notice . '</div>';
?>

JS部分 #

<script type="text/javascript">
    // 直接输出编码后的路径数组
    const selectedUrls = <?php echo json_encode($selected_file_urls, JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_UNESCAPED_UNICODE); ?>;

    if (selectedUrls.length === 0) {
        console.log('无选中文件，跳过图表加载');
    } else {
        selectedUrls.forEach(url => {
            $.ajax({
                type: "GET",
                url: encodeURI(url),
                success: function (data) {
                    drawChart(data)
                },
                error: function(xhr) {
                    console.error(`文件${url}请求失败，状态码：${xhr.status}`);
                }
            });
        });
    }

    function drawChart(raw_data) {
        // 原有图表绘制逻辑
    }
</script>

• 直接查看浏览器渲染后的页面源代码，找到PHP输出的JS变量行，确认实际输出的内容是否为合法的JS数组、是否包含HTML标签或无效路径
• 把PHP输出的文件路径直接粘贴到浏览器地址栏，验证是否能正常获取CSV文件内容，判断路径拼接是否正确
• 打开浏览器控制台查看报错，若为语法错误，大概率是JSON编码时的转义问题导致输出内容不符合JS语法规则

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