js怎么加载本地json文件

在JavaScript中，加载本地JSON文件是一个常见的操作，通常用于前端项目中数据的读取和展示，如何使用JavaScript加载本地的JSON文件呢？我将详细地介绍几种方法，帮助大家轻松掌握这一技能。

方法一：使用XMLHttpRequest对象

js怎么加载本地json文件

XMLHttpRequest对象是前端开发中常用的与服务器交互数据的对象，我们可以利用它来加载本地的JSON文件。

JavaScript

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求类型、文件路径及异步处理方式
xhr.open('GET', 'data.json', true);
// 设置响应类型
xhr.responseType = 'json';
// 请求完成的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，获取JSON数据
    var data = xhr.response;
    console.log(data);
  } else {
    // 请求失败，处理错误
    console.error('加载JSON文件失败：', xhr.statusText);
  }
};
// 发送请求
xhr.send();

方法二：使用fetch API

fetch API是现代浏览器提供的一种更加简洁、强大的网络请求接口，使用fetch API加载本地JSON文件非常简单。

JavaScript

// 使用fetch API请求本地JSON文件
fetch('data.json')
  .then(response => {
    if (response.ok) {
      // 请求成功，解析JSON数据
      return response.json();
    } else {
      // 请求失败，抛出错误
      throw new Error('加载JSON文件失败：' + response.statusText);
    }
  })
  .then(data => {
    // 处理获取到的JSON数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

方法三：使用jQuery的$.ajax方法

如果你在项目中使用了jQuery库，那么可以使用$.ajax方法来加载本地JSON文件。

JavaScript

// 使用jQuery的$.ajax方法加载本地JSON文件
$.ajax({
  url: 'data.json',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // 请求成功，处理JSON数据
    console.log(data);
  },
  error: function(xhr, status, error) {
    // 请求失败，处理错误
    console.error('加载JSON文件失败：', status, error);
  }
});