js如何传递json

JavaScript 中 JSON 数据的传递：从基础到实践**

在现代 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级、易读的数据交换格式，扮演着至关重要的角色，它几乎成为了前后端数据交互的默认标准，JavaScript 作为 Web 前端的核心语言，与 JSON 的结合尤为紧密，在 JavaScript 中，我们究竟如何高效、准确地传递 JSON 数据呢？本文将详细探讨从 JSON 的基本概念到各种常见传递场景的实现方法。

理解 JSON：不仅仅是 JavaScript 对象

我们需要明确 JSON 和 JavaScript 对象（Object）的区别,尽管它们看起来非常相似。

JSON (JavaScript Object Notation)：
- 一种数据格式,而非编程语言。
- 语法规则更严格：
  - 属性名必须使用双引号包裹。
  - 值可以是：字符串（双引号）、数字、布尔值、null、数组、或对象（遵循 JSON 规则）。
  - 不能包含方法或函数。
  - 不能使用尾随逗号（最后一个属性后不能有逗号）。
- 示例：{"name": "张三", "age": 30, "isStudent": false, "courses": ["math", "english"]}
JavaScript 对象 (Object Literal)：
- JavaScript 的一种数据类型。
- 语法相对灵活：
  - 属性名可以省略引号（如果符合标识符规则）,也可以使用单引号或双引号。
  - 值可以是任何有效的 JavaScript 表达式，包括函数、日期对象、undefined 等。
  - 可以包含方法。
  - 允许使用尾随逗号。
- 示例：{name: "李四", 'age': 25, isStudent: true, sayHello: function() { console.log("Hello"); }}

关键点：当我们说“传递 JSON”时，通常指的是传递符合 JSON 格式的字符串数据，因为网络传输（如 HTTP 请求）只能传输文本。

JavaScript 中 JSON 的核心操作：序列化与反序列化

在 JavaScript 中，我们主要通过两个内置方法来实现 JSON 对象/值与字符串之间的转换：

JSON.stringify()：序列化（对象/值 -> JSON 字符串）

将一个 JavaScript 对象或值转换为 JSON 字符串。
语法：JSON.stringify(value[, replacer[, space]])
- value: 要转换的对象或值。
- replacer (可选): 可以是一个函数或数组，用于控制哪些属性被包含在最终的 JSON 字符串中。
- space (可选): 用于美化输出，使 JSON 字符串更具可读性（可以是数字或字符串）。

示例：

const user = {
    id: 1,
    name: "王五",
    email: "wangwu@example.com",
    password: "123456" // 这个我们不希望传递
};
// 基本序列化
const jsonString = JSON.stringify(user);
console.log(jsonString); 
// 输出: {"id":1,"name":"王五","email":"wangwu@example.com","password":"123456"}
// 使用 replacer 过滤属性
const filteredJsonString = JSON.stringify(user, ["id", "name"]);
console.log(filteredJsonString);
// 输出: {"id":1,"name":"王五"}
// 使用 space 美化输出
const prettyJsonString = JSON.stringify(user, null, 2);
console.log(prettyJsonString);
/*
输出:
{
  "id": 1,
  "name": "王五",
  "email": "wangwu@example.com",
  "password": "123456"
}
*/

JSON.parse()：反序列化（JSON 字符串 -> 对象/值）

将一个 JSON 字符串解析成 JavaScript 对象或值。
语法：JSON.parse(text[, reviver])
- text: 要解析的 JSON 字符串。
- reviver (可选): 一个函数，用于转换解析后的值（将日期字符串转换为 Date 对象）。

示例：

const jsonString = '{"id": 2, "name": "赵六", "isActive": true}';
const userObject = JSON.parse(jsonString);
console.log(userObject);
// 输出: {id: 2, name: "赵六", isActive: true}
console.log(userObject.name); // 输出: 赵六
// 使用 reviver 处理日期
const jsonWithDate = '{"id": 3, "name": "钱七", "createdAt": "2023-10-27T10:00:00Z"}';
const userWithDate = JSON.parse(jsonWithDate, (key, value) => {
    if (key === "createdAt") {
        return new Date(value);
    }
    return value;
});
console.log(userWithDate.createdAt); // 输出: 一个 Date 对象
console.log(userWithDate instanceof Date); // 输出: true

JavaScript 中传递 JSON 的常见场景

了序列化和反序列化后，我们来看如何在具体场景中传递 JSON 数据。

前端发送 JSON 数据到后端（AJAX/Fetch API）

这是最常见的需求，例如提交表单数据、更新用户信息等，通常使用 fetch API 或 XMLHttpRequest（XHR）。

使用 Fetch API (推荐)：

const userData = {
    username: "newuser",
    email: "newuser@example.com",
    preferences: {
        theme: "dark",
        notifications: true
    }
};
// 1. 将对象序列化为 JSON 字符串
const jsonString = JSON.stringify(userData);
fetch('https://api.example.com/users', {
    method: 'POST', // 或 'PUT'
    headers: {
        'Content-Type': 'application/json', // 告诉服务器发送的是 JSON 数据
    },
    body: jsonString // 发送 JSON 字符串
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // 响应通常是 JSON，反序列化
})
.then(data => {
    console.log('Success:', data);
    // 处理从后端返回的数据
})
.catch(error => {
    console.error('Error:', error);
});

关键点：

headers 中的 'Content-Type': 'application/json' 非常重要，它告诉服务器请求体中包含的是 JSON 数据。
body 必须是字符串，因此需要 JSON.stringify()。

后端向前端传递 JSON 数据

后端 API 通常直接返回 JSON 格式的响应，前端使用 fetch 或 XHR 接收后，需要用 JSON.parse()（或 response.json() 方法）将其转换为 JavaScript 对象。

fetch('https://api.example.com/users/1')
    .then(response => response.json()) // response.json() 内部会调用 JSON.parse()
    .then(data => {
        console.log('Received user data:', data);
        // 现在可以像操作普通 JS 对象一样操作 data
        console.log(data.name);
    })
    .catch(error => {
        console.error('Error fetching user:', error);
    });

在页面间传递 JSON 数据（URL 参数、LocalStorage、SessionStorage）

通过 URL 参数传递（通常传递简单结构或编码后的 JSON）：

对于简单的数据，可以直接拼接 URL。
对于复杂的 JSON 对象，通常需要先 JSON.stringify()，encodeURIComponent() 编码，接收方再 decodeURIComponent() 解码，JSON.parse()。

// 发送方
const complexData = { id: 101, filter: { status: 'active', page: 1 } };
const encodedData = encodeURIComponent(JSON.stringify(complexData));
window.location.href = `page2.html?data=${encodedData}`;
// 接收方 (page2.html)
const urlParams = new URLSearchParams(window.location.search);
const encodedDataFromUrl = urlParams.get('data');
if (encodedDataFromUrl) {
    const decodedData = decodeURIComponent(encodedDataFromUrl);
    const originalData = JSON.parse(decodedData);
    console.log(originalData);
}

通过 LocalStorage/SessionStorage 传递：
- 这两个 API 只能存储字符串，对象需要先序列化为 JSON 字符串存储,读取时再反序列化。
```
// 发送方 (page1.html)
const cartItems = [
    { productId:
```