JS 读取本地json|极客笔记

JS 读取本地json

一、简介

在前端开发中，我们经常需要从服务器获取数据并展示在页面上。但有时候，我们也需要读取本地存储的json文件来初始化页面数据或配置信息。在这篇文章中，我们将介绍如何使用JavaScript读取本地的json文件，并展示读取成功后的数据。

二、准备工作

在开始之前，我们需要准备一个本地的json文件。我们可以创建一个名为 data.json 的文件，并写入一些简单的json数据，如下所示：

{
  "name": "Alice",
  "age": 25,
  "gender": "female"
}

三、读取本地json文件

在JavaScript中，我们可以通过XMLHttpRequest对象来读取本地的json文件。我们可以创建一个函数来实现这一功能，代码如下：

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', 'data.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}

// 调用函数并处理返回的数据
loadJSON(function(json) {
  console.log(json);
});

在上面的代码中，我们定义了一个名为 loadJSON 的函数，该函数接收一个回调函数作为参数。在函数内部，我们创建了一个XMLHttpRequest对象，并使用 open 方法打开一个与本地json文件的连接。然后，在 onreadystatechange 事件中，判断请求的状态和返回的状态码，如果都符合条件，就调用回调函数，并将返回的json数据传递给回调函数。

四、运行结果

我们可以在浏览器中打开控制台，运行上面的代码，即可看到输出的json数据：

{name: "Alice", age: 25, gender: "female"}

通过以上步骤，我们成功地实现了使用JavaScript读取本地的json文件，并展示了读取成功后的数据。

JS 读取本地json