一文看懂前后端请求参数传递方式和数据格式以及它们之间的关系

文章目录

一、在前后端接口联通时，前端可以使用以下4种方式来传参

二、数据格式

三、传递方式和数据格式之间的关系

总结

---

一、在前后端接口联通时，前端可以使用以下4种方式来传参

• 查询字符串参数（query参数）：将参数以查询字符串的形式添加到 URL 中，例如 http://example.com/api/users?id=123&name=John。这种方式通常用于 GET 请求，但也可以用于 POST 请求。
• 请求体参数：将参数放在请求体中，通常用于 POST、PUT 或 PATCH 请求。在请求体中，可以使用多种数据格式，例如 JSON、URL 编码格式或纯文本格式。
• 路径参数（params参数）：将参数作为 URL 路径的一部分，通常用于 RESTful API。例如，如果有一个用户资源，可以使用 /api/users/{id} 来获取或更新用户信息，其中 {id} 是路径参数。
• 头部参数：将参数放在 HTTP 头部中，通常用于传递元数据或身份验证信息。例如，可以使用 Authorization 头部来传递访问令牌。

如果要传递大量参数，可以使用请求体参数；如果要传递敏感信息，可以使用头部参数来加密传输；如果需要查询数据，可以使用查询字符串参数。

二、数据格式

JSON、URL 编码格式和纯文本格式都是常见的前端传递参数时使用的数据格式，它们的区别如下：

• JSON：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端交互。JSON 格式支持复杂的数据结构，例如对象、数组、字符串、数字和布尔值等。在 JavaScript 中，可以使用 JSON.parse() 和 JSON.stringify() 方法来解析和生成 JSON 数据。
• URL 编码格式：URL 编码格式是一种将字符串转换为 ASCII 码的可读格式的方法，常用于传递 URL 参数或表单数据。在 URL 编码格式中，特殊字符（例如空格、&、+、/ 等）会被转换为 % 加上对应的 ASCII 码，例如空格会被转换为 %20。在 JavaScript 中，可以使用 encodeURI() 和 encodeURIComponent() 方法来将字符串转换为 URL 编码格式。
• 纯文本格式：纯文本格式是一种最基本的文本格式，不包含任何格式化或元数据。在传递参数时，可以将参数值作为纯文本格式传递，例如使用 fetch() 方法发送 POST 请求时，可以将请求体的类型设置为纯文本格式。

如果要传递复杂的数据结构，可以使用 JSON 格式；如果要传递 URL 参数，可以使用 URL 编码格式；如果要传递简单的文本数据，可以使用纯文本格式。

三、传递方式和数据格式之间的关系

• 查询字符串参数和路径参数的数据格式通常是固定的，不能够自由指定。在查询字符串参数中，数据格式通常是 key=value 的形式，例如 http://example.com/api/users?id=123&name=John。在路径参数中，数据格式通常是使用占位符 {} 来表示动态的参数，例如 /api/users/{id}。这些数据格式是固定的，不能够使用多种数据格式。
• 而在请求体参数中，数据格式可以根据具体需要来指定。常见的数据格式有 JSON、XML、URL 编码格式、纯文本格式等。在使用 POST、PUT 或 PATCH 请求时，可以将参数放在请求体中，并使用不同的 Content-Type 头部来指定不同的数据格式。例如，在使用 JSON 格式时，可以使用 Content-Type: application/json 头部；在使用 URL 编码格式时，可以使用 Content-Type: application/x-www-form-urlencoded 头部。

---

总结

因此，请求体参数通常比查询字符串参数和路径参数更灵活，能够适应更多的数据格式需求。但同时，请求体参数也需要更多的数据传输，可能会影响性能。在选择参数传递方式时，需要根据具体需求来进行权衡。