如何在JavaScript onclick事件中重新加载更新后的JSON数据？

我原本通过静态导入的方式获取project.json的数据：

import jsondata1 from '../project.json' assert {type: 'json'};
var jsondata1s = JSON.stringify(jsondata1)
document.getElementById("project-btn").onclick ...

但这个JSON文件会被其他进程修改，我希望每次点击按钮时都能重新获取更新后的JSON数据，原本想把导入逻辑放在点击事件里：

document.getElementById("project-btn").onclick = () => {
    //import jsondata1 from '../project.json' assert {type: 'json'};
    var jsondata1s = JSON.stringify(jsondata1)
}

但import语句不能放在函数内部，想问怎么实现这个需求？有没有不需要在代码开头就导入JSON数据的其他方式？

不要使用静态import（静态导入的模块会被缓存，无法重新加载最新内容），改用fetch API动态请求JSON文件，每次点击按钮时发起请求即可获取最新数据。

示例代码 #

document.getElementById("project-btn").onclick = async () => {
  try {
    // 每次点击都请求最新的JSON文件
    // 加时间戳参数避免浏览器缓存旧数据
    const url = `../project.json?t=${Date.now()}`;
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    
    const jsondata1 = await response.json();
    const jsondata1s = JSON.stringify(jsondata1);
    
    // 这里添加你需要的后续处理逻辑
    console.log('最新JSON数据:', jsondata1s);
  } catch (error) {
    console.error('获取数据出错:', error);
  }
};

说明 #

• fetch每次都会向服务器发起新请求，不会受模块缓存限制，能拿到其他进程修改后的最新JSON内容。
• 加入时间戳参数?t=${Date.now()}是为了绕过浏览器的缓存机制，确保每次请求的都是最新文件（如果你的服务器配置了禁用静态文件缓存，也可以省略这个参数）。

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