揭秘前端与后端数据格式背后的秘密，解锁无缝数据传输

2023-11-08 02:08:12

前端数据传输指南：格式、方法和选择

数据格式

前端向服务器发送数据时，必须遵循特定的格式，以确保数据被正确理解和处理。常见的格式包括：

查询字符串： 用于在 URL 中发送简单数据。例如：https://example.com/page?id=123&name=John。
表单格式： 用于收集用户输入，数据以键值对形式发送。例如： <form action="/submit" method="post">...</form>。
JSON 字符串格式： 一种易于读取和转换的文本表示对象。例如：{"id": 123, "name": "John"}。
FormData 格式： 用于发送二进制数据，如文件和图像。例如：const formData = new FormData(); formData.append("file", file);。

数据格式对应的发送方法

根据所选数据格式，需要使用不同的发送方法：

数据格式	发送方法
查询字符串	GET
表单格式	POST/GET
JSON 字符串格式	POST
FormData 格式	POST

HTTP 请求方法

HTTP 请求方法决定了浏览器如何向服务器发送数据。主要方法包括：

GET： 用于检索数据，不会修改服务器数据。例如：fetch("https://example.com/data")。
POST： 用于向服务器发送数据，可以修改服务器数据。例如：fetch("https://example.com/submit", { method: "POST" })。
PUT： 用于更新服务器上的特定资源。例如：fetch("https://example.com/resource/123", { method: "PUT" })。
DELETE： 用于从服务器删除特定资源。例如：fetch("https://example.com/resource/123", { method: "DELETE" })。
OPTIONS： 用于查询服务器支持哪些 HTTP 请求方法。例如：fetch("https://example.com/options")。

选择合适的数据格式和发送方法

在选择数据格式和发送方法时，需要考虑以下因素：

数据大小和复杂性： 大且复杂的数据适合 JSON 字符串或 FormData 格式。
数据敏感性： 敏感数据应使用 POST 请求发送。
请求类型： 只读请求使用 GET，修改请求使用 POST、PUT 或 DELETE。

代码示例

// 发送查询字符串数据
fetch("https://example.com/search?query=shoes");

// 发送表单数据
const form = document.querySelector("form");
form.addEventListener("submit", e => {
  e.preventDefault();
  const formData = new FormData(form);
  fetch("https://example.com/submit", { method: "POST", body: formData });
});

// 发送 JSON 字符串数据
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "John", age: 30 })
});