怎么调用json数据

轻松JSON数据的调用方法

在当今的互联网开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，已成为前后端数据交互的“通用语言”，无论是网页获取服务器数据、移动端接口请求，还是配置文件存储，JSON都无处不在，但许多初学者面对“调用JSON数据”时，常常感到无从下手，本文将从JSON的基础概念出发，结合具体代码示例，带你一步步调用JSON数据的实用方法。

先搞懂：什么是JSON？

JSON是一种基于文本的数据格式,结构清晰、易于人阅读和编写，也易于机器解析和生成，它采用“键值对”（Key-Value Pair）的形式存储数据，类似于JavaScript中的对象，但语法更严格，常见的JSON数据结构有两种：

对象（Object）

用花括号 包裹，由多个键值对组成，键和值之间用冒号 分隔，键值对之间用逗号 分隔。

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语", "编程"]
}

数组（Array）

用方括号 [] 包裹，由多个值组成，值之间用逗号 分隔。

[
  {"id": 1, "title": "文章1"},
  {"id": 2, "title": "文章2"}
]

关键规则：

• 键必须用双引号 包裹（单引号会报错）；
• 值可以是字符串、数字、布尔值、数组、对象甚至 null；
• 末尾不能有逗号（如 "key": "value", 是错误的）。

调用JSON数据的三大场景及方法

调用JSON数据的核心,是将“文本格式的JSON”转换为“程序可识别的数据结构”（如JavaScript对象、Python字典等），再从中提取所需信息，根据数据来源不同，调用方法可分为三类：本地JSON文件调用、网络API接口调用、直接字符串JSON解析。

场景1：调用本地JSON文件（适用于静态数据）

当JSON数据存储在本地文件中（如 data.json），需要通过程序读取并解析，不同编程语言方法略有差异，这里以最常见的前端（JavaScript）和后端（Python）为例。

JavaScript（前端）

前端调用本地JSON文件,需注意浏览器“同源策略”的限制（若直接通过 file:// 协议访问，可能因跨域被阻止），通常通过以下两种方式：

方法①：直接引入（适用于静态资源）
若JSON文件作为静态资源（如放在 public/data.json），可通过 <script> 标签直接引入，但需将JSON文件包装成JavaScript变量（如 window.data）：

// data.json (需修改为JS格式)
window.userData = {
  "name": "张三",
  "age": 25
};

然后在HTML中引入：

<script src="data.json"></script>
<script>
  console.log(window.userData.name); // 输出：张三
</script>

方法②：使用 fetch API（推荐，支持原生JSON格式）
通过 fetch 读取本地JSON文件（需通过本地服务器运行，如 Live Server 插件）：

fetch('/data/data.json') // 文件路径
  .then(response => response.json()) // 解析JSON文本为对象
  .then(data => {
    console.log(data.name); // 输出：张三
    console.log(data.age);  // 输出：25
  })
  .catch(error => console.error('读取失败:', error));

Python（后端）

Python中使用内置的 json 模块读取本地JSON文件：

import json
# 读取JSON文件
with open('data.json', 'r', encoding='utf-8') as f:
  data = json.load(f)  # 解析JSON文本为Python字典
# 调用数据
print(data['name'])  # 输出：张三
print(data['age'])   # 输出：25

场景2：调用网络API接口的JSON数据（最常见）

实际开发中,JSON数据通常来自服务器API接口（如天气数据、用户信息等），调用网络API的核心是发送HTTP请求，并解析返回的JSON响应，这里以JavaScript的 fetch 和Python的 requests 库为例。

JavaScript（前端）

使用 fetch 发送GET请求，获取API返回的JSON数据：

// 以获取GitHub用户信息为例（API地址：https://api.github.com/users/octocat）
fetch('https://api.github.com/users/octocat')
  .then(response => {
    if (!response.ok) { // 检查HTTP状态码
      throw new Error('网络响应异常');
    }
    return response.json(); // 解析JSON
  })
  .then(data => {
    console.log(data.login);  // 用户名：octocat
    console.log(data.public_repos); // 公开仓库数：8
  })
  .catch(error => console.error('请求失败:', error));

进阶：处理异步请求（async/await）
fetch 是基于Promise的，使用 async/await 可让代码更简洁：

async function fetchUserData() {
  try {
    const response = await fetch('https://api.github.com/users/octocat');
    const data = await response.json();
    console.log(data.login);
  } catch (error) {
    console.error('请求失败:', error);
  }
}
fetchUserData();

Python（后端）

使用 requests 库（需先安装：pip install requests）发送HTTP请求并解析JSON：

import requests
# 发送GET请求
url = 'https://api.github.com/users/octocat'
response = requests.get(url)
# 检查请求是否成功（状态码200）
if response.status_code == 200:
  data = response.json()  # response.json()自动解析JSON为字典
  print(data['login'])    # 输出：octocat
  print(data['public_repos']) # 输出：8
else:
  print(f'请求失败，状态码：{response.status_code}')

场景3：解析直接定义的JSON字符串（适用于动态数据）

有时JSON数据以字符串形式存在（如从数据库读取的文本、用户输入的JSON格式数据），需先将其解析为对象/字典再使用。

JavaScript

使用 JSON.parse() 将JSON字符串解析为对象：

const jsonString = '{"name": "李四", "age": 30, "hobbies": ["阅读", "跑步"]}';
// 解析JSON字符串
const data = JSON.parse(jsonString);
// 调用数据
console.log(data.name);     // 输出：李四
console.log(data.hobbies[0]); // 输出：阅读
// 注意：若字符串格式错误（如单引号、末尾逗号），会抛出SyntaxError
try {
  const invalidJson = "{'name': '王五'}"; // 键用单引号，错误
  JSON.parse(invalidJson);
} catch (error) {
  console.error('JSON解析失败:', error.message);
}

Python

使用 json.loads()（load string）解析JSON字符串：

import json
json_string = '{"name": "李四", "age": 30, "hobbies": ["阅读", "跑步"]}'
# 解析JSON字符串
data = json.loads(json_string)
# 调用数据
print(data['name'])       # 输出：李四
print(data['hobbies'][1]) # 输出：跑步
# 错误处理（类似JavaScript）
try:
  invalid_json = "{'name': '王五'}" # 键用单引号，错误
  json.loads(invalid_json)
except json.JSONDecodeError as e:
  print(f'JSON解析失败: {e}')

调用JSON数据时的常见问题与解决

跨域问题（前端调用API时）

现象：浏览器控制台报错 Access-Control-Allow-Origin。
原因：浏览器出于安全限制，禁止网页向不同源（协议、域名、端口任一不同）的服务器发送请求。
解决：

• 后端接口配置CORS（跨域资源共享），在响应头中添加 Access-Control-Allow-Origin: *（允许所有源）或指定域名；
• 使用代理服务器（如Vue CLI的 proxy 配置、Nginx反向代理）。

JSON解析错误

现象：程序抛出 SyntaxError 或 JSONDecodeError。
**原因