如何仅用JavaScript/jQuery按国家码匹配并读取指定路径的CSV文件？

前端JavaScript（包括jQuery）无法直接读取服务器上的文件目录列表，受浏览器同源策略与安全限制约束。不过可以通过以下几种方案实现你的需求：

在服务器的./csv/目录下放置一个csv-mapping.json文件，内容为国家码到对应CSV文件名的映射，每次更新CSV文件时同步更新该JSON：

{
  "es": "m2-2022-10-25_13_45_55_es.csv",
  "fr": "m2-2022-10-25_13_45_56_fr.csv",
  "it": "m2-2022-10-25_13_46_04_it.csv"
}

前端先请求这个映射文件，再根据用户国家码获取对应CSV文件并读取：

原生JavaScript实现 #

const countryCode = 'es'; // 替换为实际获取的用户国家码

fetch('./csv/csv-mapping.json')
  .then(res => res.json())
  .then(mapping => {
    if (mapping[countryCode]) {
      const csvUrl = `./csv/${mapping[countryCode]}`;
      fetch(csvUrl)
        .then(csvRes => csvRes.text())
        .then(csvData => {
          // 此处编写CSV数据处理逻辑
          console.log('读取到的CSV数据:', csvData);
        })
        .catch(err => console.error('读取CSV失败:', err));
    } else {
      console.error('未找到对应国家的CSV文件');
    }
  })
  .catch(err => console.error('读取映射文件失败:', err));

jQuery实现 #

const countryCode = 'es';

$.getJSON('./csv/csv-mapping.json', function(mapping) {
  if (mapping[countryCode]) {
    const csvUrl = `./csv/${mapping[countryCode]}`;
    $.get(csvUrl, function(csvData) {
      // 此处编写CSV数据处理逻辑
      console.log('读取到的CSV数据:', csvData);
    }).fail(() => console.error('读取CSV失败'));
  } else {
    console.error('未找到对应国家的CSV文件');
  }
}).fail(() => console.error('读取映射文件失败'));

如果不想维护映射文件，可以直接尝试请求以目标国家码结尾的CSV文件。注意：部分服务器不支持URL通配符，此时可根据文件名规律构造请求路径：

原生JavaScript实现 #

const countryCode = 'es';
// 若服务器支持通配符，直接使用模糊匹配路径
const csvUrl = `./csv/m2-*_${countryCode}.csv`;

fetch(csvUrl)
  .then(res => {
    if (res.ok) return res.text();
    throw new Error('未找到对应国家的CSV文件');
  })
  .then(csvData => {
    // 此处编写CSV数据处理逻辑
    console.log('读取到的CSV数据:', csvData);
  })
  .catch(err => console.error(err.message));

如果服务器不支持通配符，也可根据文件更新频率，生成几个包含最近时间戳的文件名依次尝试请求，直到成功。

若可配置服务器，编写一个简单的后端接口（如PHP、Python）返回./csv/目录下的所有CSV文件名，前端请求该接口后遍历查找目标文件：

示例后端接口（PHP） #

<?php
$dir = './csv/';
$files = scandir($dir);
// 过滤非CSV文件及目录占位符
$csvFiles = array_filter($files, function($file) {
  return pathinfo($file, PATHINFO_EXTENSION) === 'csv';
});
header('Content-Type: application/json');
echo json_encode(array_values($csvFiles));
?>

前端原生JavaScript实现 #

const countryCode = 'es';

fetch('./get-csv-files.php')
  .then(res => res.json())
  .then(files => {
    // 查找以_{countryCode}.csv结尾的文件
    const targetFile = files.find(file => file.endsWith(`_${countryCode}.csv`));
    if (targetFile) {
      const csvUrl = `./csv/${targetFile}`;
      fetch(csvUrl)
        .then(csvRes => csvRes.text())
        .then(csvData => {
          // 此处编写CSV数据处理逻辑
          console.log('读取到的CSV数据:', csvData);
        })
        .catch(err => console.error('读取CSV失败:', err));
    } else {
      console.error('未找到对应国家的CSV文件');
    }
  })
  .catch(err => console.error('获取文件列表失败:', err));

jQuery实现 #

const countryCode = 'es';

$.get('./get-csv-files.php', function(files) {
  const targetFile = files.find(file => file.endsWith(`_${countryCode}.csv`));
  if (targetFile) {
    const csvUrl = `./csv/${targetFile}`;
    $.get(csvUrl, function(csvData) {
      // 此处编写CSV数据处理逻辑
      console.log('读取到的CSV数据:', csvData);
    }).fail(() => console.error('读取CSV失败'));
  } else {
    console.error('未找到对应国家的CSV文件');
  }
}, 'json').fail(() => console.error('获取文件列表失败'));

内容的提问来源于stack exchange，提问作者Gustavo Rodriguez Coronas