如何用纯JavaScript读取本地CSV文件？Python背景开发者求助

核心问题 #

你遇到的两个关键问题：

1. 代码未调用req.send()，导致请求从未真正发起，所以readyState一直停留在1（已打开连接但未发送请求），onreadystatechange自然不会触发。
2. 浏览器的安全策略禁止JavaScript直接访问本地绝对路径（如C:\\...），即使文件存在，这种跨协议的请求会被拦截。

纯原生JS解决方案 #

根据你的场景（无需Node.js/jQuery），分两种情况给出实现方案：

情况1：本地测试（推荐用Python启动本地服务器）

因为你有Python背景，最快的方式是通过Python搭建本地HTTP服务器，绕过浏览器的本地文件访问限制：

1. 把HTML文件和CSV文件放在同一个目录（或按相对路径组织）
2. 打开命令行进入该目录，运行：

   # Python 3
   python -m http.server 8000
   # Python 2
   python -m SimpleHTTPServer 8000
   

3. 在浏览器访问http://localhost:8000/你的页面.html

然后使用以下修正后的代码：

// 第一个下拉菜单的onchange事件处理函数
function updateSecondDropdown(selectedItem) {
    // 根据选中值构建CSV相对路径（示例路径，按你的实际目录调整）
    const csvPath = `./data/models/driver/steering/${selectedItem}.csv`;
    const xhr = new XMLHttpRequest();
    
    // 使用异步请求（第三个参数true，避免阻塞页面）
    xhr.open("GET", csvPath, true);
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                const csvText = xhr.responseText;
                const csvLines = csvText.split(/\r\n|\n/).filter(line => line.trim());
                populateDropdown(csvLines);
            } else {
                console.error(`加载CSV失败，状态码：${xhr.status}`);
            }
        }
    };
    
    xhr.send(); // 必须调用此方法发送请求
}

// 填充第二个下拉菜单的函数
function populateDropdown(lines) {
    const secondDropdown = document.getElementById("secondDropdown");
    // 清空原有选项
    secondDropdown.innerHTML = "";
    
    // 假设CSV第一行是表头，从第二行开始作为选项（可根据你的CSV格式调整）
    for (let i = 1; i < lines.length; i++) {
        const option = document.createElement("option");
        option.value = lines[i];
        option.textContent = lines[i];
        secondDropdown.appendChild(option);
    }
}

情况2：部署到VB.Net后端服务器

将CSV文件放在后端服务的静态资源目录下，使用后端提供的接口或直接通过相对路径访问（确保和前端页面同域），代码逻辑和上述一致，只需调整csvPath为后端服务的对应路径即可。

关键注意事项 #

• 永远不要使用同步请求（open第三个参数设为false），会导致页面卡顿，浏览器也逐步禁用该模式。
• 处理CSV时要过滤空行，避免生成无效的下拉选项。
• 若CSV格式复杂（包含逗号分隔的多列），可以手动拆分列数据，再提取需要作为下拉选项的字段。

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