JSON 客户端和服务器端的格式转换

JSON（JavaScript 对象表示法）是一种轻量级数据交换格式，通常用于客户端与服务器端进行数据传输。在客户端和服务器端之间进行数据传输时，常常需要进行 JSON 格式的转换。接下来，我将为您提供一份详细的 JSON 客户端和服务器端的格式转换攻略。

JSON 格式转换

在进行 JSON 格式转换之前，我们首先需要了解两种形式的数据表示方法:

• JSON 字符串：一段以双引号包裹的文本字符串，该字符串符合 JSON 格式规范。
• JSON 对象：一个 JavaScript 对象，该对象的属性和属性值符合 JSON 格式规范。

在实际开发过程中，我们经常需要把一个 JSON 字符串转换成一个 JSON 对象，或者把一个 JSON 对象转换成一个 JSON 字符串。这时，我们可以使用以下两个方法：

JSON.parse

JSON.parse() 方法可以把一个符合 JSON 格式规范的字符串转换为一个 JavaScript 对象，方法的语法如下：

let jsonObject = JSON.parse(jsonString);

其中，jsonString 是符合 JSON 格式规范的字符串，jsonObject 则是转换后得到的 JavaScript 对象。

以下是一个示例：

let jsonString = '{ "name": "Tom", "age": 18 }';
let jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // 输出：Tom
console.log(jsonObject.age);  // 输出：18

上面的示例中，我们首先创建了一个 JSON 字符串 jsonString，该字符串包含了两个属性 name 和 age。然后使用 JSON.parse() 方法将 jsonString 转换成了一个 JavaScript 对象 jsonObject，可以通过 jsonObject 对象的属性来获取相应的值。

JSON.stringify

JSON.stringify() 方法可以将一个 JavaScript 对象转换为符合 JSON 格式规范的字符串，方法的语法如下：

let jsonString = JSON.stringify(jsonObject);

其中，jsonObject 是一个 JavaScript 对象，jsonString 则是转换后得到的 JSON 字符串。

以下是一个示例：

let jsonObject = { name: "Tom", age: 18 };
let jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // 输出: '{"name":"Tom","age":18}'

上面的示例中，我们首先创建了一个 JavaScript 对象 jsonObject，该对象包含了两个属性 name 和 age。然后使用 JSON.stringify() 方法将 jsonObject 对象转换为了一个符合 JSON 格式规范的字符串 jsonString，可以直接在客户端和服务器端进行数据传输。

示例说明

示例一

假设我们正在开发一个在线商城，需要从后端 API 获取商品信息。后端 API 返回的数据格式如下：

{
  "code": 200,
  "message": "success",
  "data": [{
    "id": 1,
    "name": "商品 A",
    "price": 100
  }, {
    "id": 2,
    "name": "商品 B",
    "price": 200
  }]
}

需要将返回的数据转换成一个 JavaScript 对象，可以使用 JSON.parse() 方法：

fetch('/api/getGoods')
  .then(response => response.json())
  .then(data => {
    let goods = JSON.parse(data);
    console.log(goods);
  });

将获取到的商品信息列表转换成 JSON 格式字符串，可以使用 JSON.stringify() 方法：

let goods = [{
  "id": 1,
  "name": "商品 A",
  "price": 100
}, {
  "id": 2,
  "name": "商品 B",
  "price": 200
}];
let jsonString = JSON.stringify(goods);
console.log(jsonString);

示例二

假设我们正在为社交网站开发一个注册页面，用户可以在该页面填写个人信息，如用户名、密码、邮箱等。前端把用户输入的信息打包成一个 JSON 对象，发送给后端 API 进行注册。JSON 对象的格式如下：

{
  "username": "Tom",
  "password": "123456",
  "email": "[e-mail]"
}

前端需要将这个 JavaScript 对象转换成 JSON 格式字符串进行发送，可以使用 JSON.stringify() 方法：

let data = {
  "username": "Tom",
  "password": "123456",
  "email": "[e-mail]"
};
let jsonString = JSON.stringify(data);
fetch('/api/register', {
  method: 'POST',
  body: jsonString,
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  // 处理响应结果
});

后端需要将收到的 JSON 格式字符串转换成一个 JavaScript 对象进行处理，可以使用 JSON.parse() 方法：

app.post('/api/register', (req, res) => {
  let data = JSON.parse(req.body);
  console.log(data.username);
  console.log(data.password);
  console.log(data.email);
  // 处理注册逻辑
});