js中怎么取json数据

轻松：JavaScript 中获取 JSON 数据的完整指南

在现代 Web 开发中，JSON（JavaScript Object Notation）已经成为数据交换的事实标准，无论是从服务器获取 API 响应，还是读取本地配置文件，我们几乎每天都在与 JSON 数据打交道，对于 JavaScript 熟练如何从各种来源获取并解析 JSON 数据是一项至关重要的技能。

本文将系统地介绍在 JavaScript 中获取 JSON 数据的几种核心方法，从最基础的到最常用的，并辅以清晰的代码示例,让你彻底搞懂这个问题。

理解 JSON：不仅仅是 JavaScript 对象

在开始之前，我们需要明确一个关键概念：JSON 是一种数据格式，而不是 JavaScript 的一部分，它是一种轻量级的数据交换格式，易于人阅读和编写,也易于机器解析和生成。

它的语法类似于 JavaScript 的对象字面量,但有两点重要区别：

1. 属性名必须用双引号 包裹,不能用单引号。
2. 不能包含方法或函数。

一个合法的 JSON 字符串长这样：

'{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "courses": ["数学", "物理"],
  "address": {
    "city": "北京",
    "street": "中关村大街1号"
  }
}'

而一个 JavaScript 对象是这样的：

{
  name: "张三", // 属性名可以不用引号
  age: 30,
  sayHello: function() { // 可以包含方法
    console.log("你好！");
  }
}

理解这个区别至关重要，因为我们的核心任务就是将 JSON 格式的字符串转换成 JavaScript 对象,这样才能在代码中访问和使用它的数据。

核心方法：JSON.parse()

如果你已经有一个 JSON 格式的字符串，想要将其转换为 JavaScript 对象，最直接、最标准的方法就是使用 JSON.parse()。

JSON.parse() 是 JavaScript 的一个内置方法，专门用于解析一个 JSON 字符串，并构造出由该字符串描述的 JavaScript 值或对象。

语法： JSON.parse(text[, reviver])

• text: 必需，一个有效的 JSON 字符串。
• reviver: 可选，一个转换结果的函数,将在每个键值对上调用。

示例： 假设我们从某个地方（比如一个配置文件或 API 的原始响应）得到了一个 JSON 字符串。

// 1. 定义一个 JSON 格式的字符串
const jsonString = '{"name": "李四", "age": 25, "hobbies": ["阅读", "旅行"]}';
// 2. 使用 JSON.parse() 将其转换为 JavaScript 对象
const jsObject = JSON.parse(jsonString);
// 3. 现在你可以像操作普通 JS 对象一样访问数据
console.log(jsObject); // 输出: { name: '李四', age: 25, hobbies: [ '阅读', '旅行' ] }
console.log(jsObject.name); // 输出: 李四
console.log(jsObject.hobbies[0]); // 输出: 阅读
console.log(jsObject.age + 5); // 输出: 30

⚠️ 重要提示：JSON.parse() 的异常处理

如果传入的字符串不是一个合法的 JSON 格式，JSON.parse() 会抛出 SyntaxError 异常，在实际开发中，你必须使用 try...catch 语句来处理这种潜在的错误。

const invalidJsonString = "{ name: '王五', age: 40 }"; // 属性名没有用双引号，是无效的 JSON
try {
  const data = JSON.parse(invalidJsonString);
  console.log(data);
} catch (error) {
  console.error("解析 JSON 失败: ", error.message);
  // 输出: 解析 JSON 失败: Unexpected token n in JSON at position 2
}

实际应用场景：从不同来源获取 JSON 数据

了 JSON.parse() 后,我们来看它在实际开发中的三种主要应用场景。

场景 1：处理服务器响应（AJAX / Fetch API）

这是最常见的场景，当你的网页需要从服务器获取数据时（获取用户信息、文章列表等），服务器通常会返回一个 JSON 格式的响应,你需要做的就是获取这个响应体并解析它。

使用现代的 fetch API： fetch 是目前推荐的方式，它返回一个 Promise,处理起来非常优雅。

// 假设这是一个提供 JSON 数据的 API 地址
const apiUrl = 'https://api.example.com/data';
fetch(apiUrl)
  .then(response => {
    // 1. 首先检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 2. 使用 response.json() 来解析响应体
    // 注意：response.json() 也会返回一个 Promise
    return response.json();
  })
  .then(data => {
    // 3. 'data' 已经是一个解析好的 JavaScript 对象了
    console.log('从服务器获取的数据:', data);
    // 如果 data 结构是 { user: { name: '赵六' } }
    console.log('用户名:', data.user.name);
  })
  .catch(error => {
    // 4. 捕获网络错误或解析错误
    console.error('获取数据时出错:', error);
  });

使用传统的 XMLHttpRequest (XHR): 在 fetch 出现之前，XHR 是主流方式，它更底层,代码也更繁琐。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 1. 获取响应文本
    const jsonResponse = xhr.responseText;
    // 2. 使用 JSON.parse() 手动解析
    const data = JSON.parse(jsonResponse);
    console.log('从服务器获取的数据:', data);
  } else {
    console.error('请求失败');
  }
};
xhr.onerror = function() {
  console.error('网络错误');
};
xhr.send();

关键点： 使用 fetch 时，response.json() 已经帮你完成了 JSON.parse() 的工作，而使用 XHR 时，你需要手动调用 JSON.parse()。

场景 2：读取本地 JSON 文件

在开发阶段，我们常常需要加载本地的 JSON 配置文件或模拟数据，你可以通过 <script> 标签或 JavaScript 的 fetch 来实现。

方法 A：使用 <script> 标签（适用于静态文件）

你可以将 JSON 文件作为 JavaScript 模块来加载。

1. 创建一个 data.json 文件：

   {
     "version": "1.0.0",
     "config": {
       "theme": "dark",
       "language": "zh-CN"
     }
   }

2. 在 HTML 中引入它，并设置 type="application/json"：

   <script type="application/json" src="data.json" id="my-json-config"></script>

3. 在 JavaScript 中获取并解析：

   const scriptElement = document.getElementById('my-json-config');
   const jsonString = scriptElement.textContent; // 或 .innerText
   const config = JSON.parse(jsonString);
   console.log(config); // 输出解析后的对象
   console.log('当前主题:', config.config.theme); // 输出: dark

方法 B：使用 fetch（推荐，更灵活）

这种方法更现代,也更符合模块化的思想。

fetch('data.json')
  .then(response => response.json()) // 直接使用 response.json()
  .then(data => {
    console.log('从本地文件加载的数据:', data);
    console.log('当前语言:', data.config.language);
  })
  .catch(error => console.error('加载本地 JSON 文件失败:', error));

场景 3：直接在代码中定义 JSON 字符串

数据量不大且固定，你可能会直接在代码里写一个 JSON 字符串,处理方式完全相同。

const myDataString = '{"id": 101, "product": "笔记本电脑", "price": 5999}';
// 使用 try...catch 是个好习惯
try {
  const productInfo = JSON.parse(myDataString);
  console.log(`产品: ${productInfo.product}, 价格: ¥${productInfo.price}`);
} catch (e) {
  console.error("数据格式错误");
}

反向操作：将对象转为 JSON (JSON.stringify())

虽然本文主题是“取”数据，但了解其反向操作 JSON.stringify() 也非常有帮助，当你需要将一个 JavaScript 对象发送给服务器或存储在 localStorage 中时，你需要先把它转换成 JSON 字符串。

const user = {
  id: 123,
  name: "孙七",
  details: {
    email: "sunqi@example.com"
  }
  // 注意：