如何让浏览器运行 JSON：轻松处理和解析 JSON 数据
在当今的 Web 开发中，JSON（JavaScript Object Notation）已经成为一种非常流行的数据交换格式，JSON 格式易于阅读和编写，同时也易于机器解析和生成，它基于 JavaScript 语言标准，但是独立于语言，许多编程语言都有解析和生成 JSON 的库，在浏览器中运行 JSON 数据并不难，本文将详细介绍如何在浏览器中处理和解析 JSON 数据。
1、JSON 基础
JSON 数据格式由一系列键值对组成，其中键是字符串，值可以是字符串、数字、布尔值、数组或对象，JSON 对象表示为花括号（{}）内的键值对集合，而数组表示为方括号（[]）内的值集合。
{
"name": "张三",
"age": 30,
"isStudent": false,
"hobbies": ["篮球", "音乐", "旅行"]
}
2、在 JavaScript 中解析 JSON
要在浏览器中解析 JSON 数据，首先需要将 JSON 字符串转换为 JavaScript 对象，这可以通过使用 JSON.parse() 方法实现。
const jsonString = '{"name":"张三","age":30,"isStudent":false,"hobbies":["篮球","音乐","旅行"]}';
const jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出 "张三"
console.log(jsonObj.age); // 输出 30
console.log(jsonObj.isStudent); // 输出 false
console.log(jsonObj.hobbies); // 输出 ["篮球", "音乐", "旅行"]
3、将 JavaScript 对象转换为 JSON 字符串
要将 JavaScript 对象转换为 JSON 字符串，可以使用 JSON.stringify() 方法。
const jsonObj = {
name: "李四",
age: 25,
isStudent: true,
hobbies: ["足球", "阅读", "旅游"]
};
const jsonString = JSON.stringify(jsonObj);
console.log(jsonString); // 输出 '{"name":"李四","age":25,"isStudent":true,"hobbies":["足球","阅读","旅游"]}'
4、从服务器获取 JSON 数据
在实际应用中，我们通常需要从服务器获取 JSON 数据，这可以通过使用 XMLHttpRequest 对象或 fetch() 函数实现，使用 fetch() 函数：
fetch('https://api.example.com/data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error('Error:', error));
5、使用 JSONP 跨域请求数据
由于浏览器的同源策略限制，直接从其他域名请求 JSON 数据可能会遇到问题，JSONP（JSON with Padding）是一种跨域请求数据的解决方案，通过动态创建 <script> 标签并设置其 src 属性为包含 JSON 数据的 URL，可以实现跨域请求，服务器端需要将 JSON 数据嵌入到一个函数调用中，客户端提供一个回调函数来接收数据。
在浏览器中运行 JSON 数据非常简单，通过使用 JSON.parse() 和 JSON.stringify() 方法，可以轻松地在 JSON 字符串和 JavaScript 对象之间进行转换，还可以通过 fetch() 函数或 JSONP 技术从服务器获取 JSON 数据，掌握这些技巧，将有助于您更高效地处理和解析 JSON 数据。