jQuery读取本地json文件|极客教程

jQuery读取本地json文件

在前端开发中，经常会遇到需要使用JSON数据的情况。而在某些情况下，我们需要读取本地JSON文件来获取数据。本文将详细介绍如何使用jQuery读取本地JSON文件。

准备工作

在开始之前，我们需要准备一个本地的JSON文件。可以使用任何文本编辑器创建一个包含JSON数据的文件，例如：

{
  "name": "Alice",
  "age": 25,
  "city": "New York"
}

将这个JSON数据保存为data.json文件。

使用jQuery读取本地JSON文件

首先，在HTML文件中引入jQuery：

<script src="https://cdn.jsdelivr.net/npm/jquery"></script>

然后，在JavaScript代码中使用jQuery的$.getJSON()方法来读取本地JSON文件：

$.getJSON('data.json', function(data) {
  console.log(data);
});

以上代码中，$.getJSON()方法的第一个参数为JSON文件的路径，第二个参数为回调函数，当成功读取JSON文件时，回调函数将被调用并传入JSON数据。在回调函数中，我们通过console.log()方法打印出读取的JSON数据。

完整示例

下面是一个完整的示例，包含HTML、JavaScript和JSON文件：

<!doctype html>
<html>
<head>
  <title>读取本地JSON文件</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
</head>
<body>

<h1>本地JSON文件内容：</h1>
<pre id="output"></pre>

<script>
   $.getJSON('data.json', function(data) {$ ('#output').text(JSON.stringify(data, null, 2));
  });
</script>

</body>
</html>

在上面的示例中，我们通过JSON.stringify()方法将JSON数据格式化后输出到页面上。

运行结果

当我们打开上面的示例代码所对应的HTML文件时，页面会显示如下内容：

本地JSON文件内容：
{
  "name": "Alice",
  "age": 25,
  "city": "New York"
}

这表明我们成功读取了本地JSON文件并将其内容显示在页面上。

小结

通过这篇文章的详细介绍，我们了解了如何使用jQuery读取本地JSON文件。这个技术在前端开发中非常实用，可以帮助我们获取并处理本地存储的JSON数据。

jQuery读取本地json文件