如何js读取json文件

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

大家好，今天要和大家分享一个非常实用的小技巧，那就是如何用JavaScript来读取JSON文件，相信很多小伙伴在开发过程中都会遇到需要处理JSON数据的情况，如何读取JSON文件就显得尤为重要了。

我们要了解JSON文件是什么，JSON，全称是JavaScript Object Notation，它是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，在Web开发中，JSON文件常用于存储和传输数据，因为它的结构清晰，解析起来也非常方便。

如何用JavaScript读取JSON文件呢？这里有几个步骤，我们一起来看一看。

准备JSON文件

你需要有一个JSON文件，这个文件可以是本地的，也可以是服务器上的，假设我们有一个名为data.json的文件，内容如下：

{
  "name": "张三",
  "age": 30,
  "city": "北京"
}

2. 使用Fetch API读取本地JSON文件

如果你是在浏览器环境中工作，可以使用Fetch API来读取本地的JSON文件，这是一个异步操作，所以我们需要使用async/await来处理。

async function readLocalJSON() {
  try {
    const response = await fetch('data.json');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('读取JSON文件出错:', error);
  }
}
readLocalJSON();

这段代码会尝试从当前目录下读取data.json文件，并将其内容解析为JavaScript对象。

3. 使用XMLHttpRequest读取服务器上的JSON文件

如果你需要从服务器上读取JSON文件，可以使用XMLHttpRequest对象，这是一个稍微老一些的技术，但在某些情况下仍然非常有用。

function readServerJSON() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://example.com/data.json', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      console.log(data);
    }
  };
  xhr.send();
}
readServerJSON();

这段代码会向指定的URL发送GET请求，并在收到响应后解析JSON数据。