2个方法教你javascript如何读取json文件内容

涛哥 PHP代码

要在 JavaScript 中读取 JSON 文件的内容,您可以使用 AJAX 技术或 Fetch API。以下是两种读取 JSON 文件的常用方法:

方法一:使用 AJAX

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'example.json', true);

// 设置响应类型
xhr.responseType = 'json';

// 定义回调函数
xhr.onload = function() {
  // 在请求成功时,处理返回的数据
  if (xhr.status === 200) {
    var data = xhr.response;
    console.log(data);
  } else {
    console.log('请求失败');
  }
};

// 发送请求
xhr.send();

在这个示例中,我们使用 XMLHttpRequest 对象创建了一个 GET 请求,并设置响应类型为 JSON。在请求成功时,我们处理返回的数据并输出到控制台中。请注意,此方法是异步的,因此您需要定义回调函数来处理响应数据。

方法二:使用 Fetch API

// 发送 GET 请求
fetch('example.json')
  .then(function(response) {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error('请求失败');
    }
    
    // 解析响应数据
    return response.json();
  })
  .then(function(data) {
    // 在请求成功时,处理返回的数据
    console.log(data);
  })
  .catch(function(error) {
    // 在请求失败时,处理错误信息
    console.log(error);
  });

在这个示例中,我们使用 fetch() 函数创建一个 GET 请求,并在请求成功时解析返回的 JSON 数据。请注意,此方法也是异步的,因此您需要使用 then() 方法定义处理成功和失败的回调函数。