如何将JSON文件内容加载为JavaScript变量：实现b2021.json数据导入arrayName数组

没问题，我来帮你搞定这个事儿！要把b2021.json里的数组内容加载到arrayName变量里，有几种实用的方法，我给你一步步讲清楚：

方法一：使用现代的fetch API（推荐） #

这是目前最常用的异步请求方式，代码简洁且支持Promise语法，处理异步逻辑更清晰：

// 声明全局变量arrayName
let arrayName = [];

// 加载JSON文件的函数
function loadJSON() {
  // 发起请求，确保JSON文件和你的HTML/JS文件在同一目录下
  fetch('b2021.json')
    .then(response => {
      // 检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败！状态码: ${response.status}`);
      }
      // 将响应解析为JSON格式
      return response.json();
    })
    .then(data => {
      // 把解析后的JSON数组赋值给arrayName
      arrayName = data;
      console.log('JSON加载完成啦:', arrayName);
      // 确保数据加载完成后再调用write函数
      write();
    })
    .catch(error => {
      // 捕获加载或解析过程中的错误
      console.error('加载JSON时出问题了:', error);
    });
}

function write() {
  window.alert(arrayName);
}

// 等页面DOM加载完成后，自动触发JSON加载
window.addEventListener('DOMContentLoaded', loadJSON);

方法二：使用XMLHttpRequest（兼容老浏览器） #

如果需要兼容一些不支持fetch的旧浏览器，可以用这个传统的方式：

let arrayName = [];

function loadJSON() {
  const xhr = new XMLHttpRequest();
  // 配置请求：GET方法，请求地址，异步模式
  xhr.open('GET', 'b2021.json', true);
  
  xhr.onload = function() {
    // 检查请求状态码是否正常
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        // 解析响应文本为JSON数组
        arrayName = JSON.parse(xhr.responseText);
        console.log('JSON加载完成:', arrayName);
        write();
      } catch (e) {
        console.error('解析JSON出错了:', e);
      }
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  };
  
  // 处理网络错误
  xhr.onerror = function() {
    console.error('网络请求出错啦');
  };
  
  // 发送请求
  xhr.send();
}

function write() {
  window.alert(arrayName);
}

window.addEventListener('DOMContentLoaded', loadJSON);

重要注意事项 #

• 路径要正确：确保b2021.json和你的HTML文件、JS文件在同一个文件夹下，如果不在同一目录，要写正确的相对路径（比如./data/b2021.json）。
• JSON格式要合法：JSON本身不支持注释，记得把你b2021.json里的//file content注释删掉，否则会解析失败。
• 跨域问题：如果直接双击打开本地HTML文件（用file://协议），浏览器可能会阻止请求。这时候建议用本地服务器运行，比如VS Code的「Live Server」插件，或者用Node.js的http-server工具，这样用http://localhost访问就不会有跨域限制了。
• 异步顺序：因为加载JSON是异步操作，原来的write函数如果在数据加载前调用，arrayName还是空数组。所以一定要等JSON加载完成后再调用write，就像上面代码里那样在回调里触发。

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