x-www-form-urlencoded 是什么？图文讲解如何使用

在 Web 开发中，处理表单数据是一项常见任务，数据可以通过多种格式发送到服务器，其中 application/x-www-form-urlencoded 是最古老且广泛使用的一种编码方式。本文将深入探讨这种编码格式，解析其工作原理，并展示如何在不同场景下使用它。

什么是 x-www-form-urlencoded ？

x-www-form-urlencoded是一种数据编码格式，用于将表单数据转换为 URL 可传输的格式。它将表单数据编码为键值对，类似 URL 查询参数。在这种格式下，字符（比如空格）被转换为 %XX，其中 XX 表示字符的 ASCII 码的十六进制值，空格被转换为 + 符号。

x-www-form-urlencoded 工作原理

当浏览器提交一个表单时，如果表单的 enctype 设置为 application/x-www-form-urlencoded（这是默认的），浏览器会将表单数据转换成一个巨大的查询字符串，按照 名=值 对格式排列，每对之间用 & 分隔。

x-www-form-urlencoded 编码过程

空格转换为 +：这一变换确保了空格在传输过程中不会丢失。
特殊字符转义：字符如 &、= 在 URL 中有特殊含义，因此它们通过 % 加上两位十六进制数值的方式转义。

例如，如果您有以下表单数据：

name : John Doe
age : 30

经过 x-www-form-urlencoded 编码后，发送到服务器的数据形式如下：name=John+Doe&age=30。

使用场景和方法

1.在 HTML 表单中

HTML 表单默认使用 x-www-form-urlencoded 方式提交数据。以下示例展示了一个简单的表单，提交用户的名字和年龄：

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="age">Age:</label>
  <input type="text" id="age" name="age">
  <button type="submit">Submit</button>
</form>

在此示例中，当用户点击提交按钮时，数据将被编码并发送到 /submit 路径。

2.在 JavaScript 中

在现代 Web 应用程序中，AJAX 请求扮演着重要角色。以下是使用 Fetch API 以 x-www-form-urlencoded 格式发送数据的方法：

const data = new URLSearchParams();
data.append('name', 'John Doe');
data.append('age', '30');

fetch('/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: data
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));

在此代码片段中，URLSearchParams 用于构建编码好的字符串。Content-Type 请求头的设置确保服务器知道接收到的数据是 x-www-form-urlencoded 格式。

通过 Apifox 进一步理解

为了更简单的理解 x-www-form-urlencoded，我们通过 Apifox 来演示。Apifox 是一款优秀的 API 调试工具，它提供了简单而强大的界面，帮助开发者轻松地创建、测试和调试 API。

通过 Apifox，你可以轻松地构建带有 x-www-form-urlencoded 编码的 HTTP 请求，以传输表单数据到服务器。在 Apifox 中，你可以使用界面上提供的功能来添加文本字段到你的请求中，并选择使用 x-www-form-urlencoded 编码格式进行传输。这样，你可以方便地测试和调试你的 API 接口，确保数据能够正确地传输和处理。

以下是在 Apifox 中使用 x-www-form-urlencoded 的简要步骤：

1.创建一个接口

在 Apifox 中创建一个新接口，并选择 POST 请求方式，填入请求路径。

立即体验 Apifox

2.添加请求参数

在请求参数中选择 Body 类型为x-www-form-urlencoded，然后添加各个字段和对应的值，添加完毕后，保存即可。

3.发送请求

填写完表单数据并保存后，来到“运行”页，点击“发送”按钮即可将表单数据以 x-www-form-urlencoded 格式发送到服务器。

Axios 示例代码

我们在项目开发中是通过代码来实现的，以下是一个 Axios 的示例。在 Apifox 中，点击“实际请求->JavaScript->Axios”，将代码复制下来，粘贴到编辑器（如 vscode）中运行即可。你也可以选择其它语言，比如 Python、Java、PHP 等，这取决于你的系统是否配置有相关环境。

var axios = require('axios');
var qs = require('qs');
var data = qs.stringify({
   'name': 'Hello Kitty',
   'status': 'sold' 
});
var config = {
   method: 'post',
   url: 'https://mock.apifox.com/m1/3656905-0-default/pet',
   headers: { 
      'User-Agent': 'Apifox/1.0.0 (https://apifox.com)', 
      'Authorization': 'Bearer wueigh982gu09fdiogh98ut934w0u24u98ugwr0w942hbj0wposdjvb09g3rugj029wrobnv-wpekdvd093yu8340w9-ig9h294-2gho2jwe0gjr90gjwrpvogiojdfg', 
      'Accept': '*/*', 
      'Host': 'mock.apifox.com', 
      'Connection': 'keep-alive', 
      'Content-Type': 'application/x-www-form-urlencoded'
   },
   data : data
};

axios(config)
.then(function (response) {
   console.log(JSON.stringify(response.data));
})
.catch(function (error) {
   console.log(error);
});

以上代码是一个使用 Axios 库发送 POST 请求的示例。以下是代码的简要解释：

axios 和 qs 模块。axios 用于发送 HTTP 请求，而 qs 用于处理请求中的数据。
使用 qs.stringify() 方法将一个包含 name 和 status 属性的对象转换为 URL 编码的字符串。这个字符串将被作为 POST 请求的主体数据发送到服务器。
创建一个包含请求配置的对象 config，其中包括请求方法（post）、请求 URL、请求头（包括用户代理、授权信息、接受类型等）以及请求主体数据（刚刚转换的 URL 编码的字符串）。
使用 Axios 发送请求，传入配置对象 config。Axios 会发送 HTTP 请求并返回一个 Promise 对象。
使用 .then() 方法处理请求成功时的响应，打印出响应数据的 JSON 字符串。
使用 .catch() 方法处理请求失败时的错误，打印出错误信息。

总体来说，这段代码的作用是向指定的 URL 发送一个包含特定数据的 POST 请求，并打印出响应数据或错误信息。

总结

x-www-form-urlencoded 是处理 Web 表单数据的一种重要编码方式，易于理解和应用。尽管如此，对于传输大量数据或复杂结构的数据，可能需要考虑使用例如 JSON 这样的更适合的格式。了解和掌握 x-www-form-urlencoded 可以帮助开发者更好地处理表单数据，并确保数据在客户端和服务器之间正确、安全地传输。

免费使用 Apifox

知识扩展：