B02_接口测试前置知识补充：POST请求之Content-Type
通过 HttpRunner 进行接口测试的时候，根据接口不同的设计需求，需要提交不同类型的数据，进而在编写测试用例的时候还要选择不同类型的关键字（json/params/data/upload 等），那么到底如何选择呢，我们还是从 POST 请求提交数据的类型说起。
在 HTTP 请求中，如果使用 POST 方式提交，被提交的数据会被封装到请求“实体（body）”中，同时其请求头域“Content-Type” 中会标识出该数据的类型格式信息。一般常见的数据类型包括：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- application/json
对于表单数据的提交，可以使用“GET”或“POST”方式，我们一般使用“POST”方式居多，如进行登录操作。在使用 HTML 编写表单的时候，表单有一个 enctype 属性，用来指明表单中提交数据的编码方式。接下来我们一一举例说明。
表单的 enctype 属性规定了如何对表单提交的数据进行编码：
- application/x-www-form-urlencoded：默认提交方式，要对数据进行编码处理；
- multipart/form-data：实现文件的上传；
- text/plain：请求提交的数据是普通文本格式。
1.设置表单： enctype="application/x-www-form-urlencoded"
此设置指明，表单中要提交的数据会先进行编码处理。当然，这也是表单的默认设置，即便不指定 enctype属性，默认也是按照此设置方式进行处理的。针对表单提交数据的编码处理方式主要为：
- 空格转换为加号（+）
- 特殊符号转换为十六进制表示的 ASCII 编码
- 汉字转为与本页面设置的字符集相同的十六进制编码。即如果页面使用 UTF-8 编码，则提交的中文字符也进行 UTF-8 编码；如果页面使用 GB2312 编码，则提交的中文字符也进行 GB2312 编码。
编写表单提交页面，注意，表单的提交方法要设为 POST 方式：
<html>
<head>
<!-- 本页面编码方式：UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表单请求类型 </title>
</head>
<body>
<!-- 表单：此处 enctype 属性取值为 application/x-www-form-urlencoded -->
<form method="POST" action="c.asp" enctype="application/x-www-form-urlencoded">
<!-- 取值为普通字母 -->
<input type="text" name="K1" value="V1"> <p>
<!-- 取值包括特殊符号 -->
<input type="text" name="K2" value="V2:^#@"> <p>
<!-- 取值包括汉字，本页面存储时编码使用 UTF-8 -->
<input type="text" name="K3" value="测试"> <p>
<!-- 内容中包括空格 -->
<textarea name="K4">ABCDEFG abcdefg HIJKLMN hijklmn</textarea> <p>
<input type="submit" value="ok">
</form>
</body>
</html> 部署到Web服务器后，访问页面展示效果：
点击 OK 按钮提交表单，同时使用 Fiddler 进行抓包，查看请求头域信息。可以看到，在请求 Entity 区域指明了实体内容类型：application/x-www-form-urlencoded
继续查看实体中封装的表单数据，可以看到，所有被提交的数据被统一进行编码，形成了一行字符串。其编码方式主要为：
- 表单中元素的 name 属性和 value 属性被处理为：name=value 的键值对方式；
- 每个元素的键值对之间使用 & 符号进行分割；
- 特殊符号使用对应的 ASCII 码表示；
- 中文按页面编码格式，转为 UTF-8 编码
具体每项编码如图所示：
2. 设置表单： enctype="multipart/form-data"
继续设置表单 enctype 属性，其取值设置为 multipart/form-data 方式，该方式将不对提交的数据进行编码，但是实体的组织展现格式会有不同。编码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表单请求类型 </title>
</head>
<body>
<!-- 表单：此处 enctype 属性取值为 multipart/form-data -->
<form method="POST" action="c.asp" enctype="multipart/form-data">
<input type="text" name="K1" value="V1"> <p>
<input type="text" name="K2" value="V2:^#@"> <p>
<input type="text" name="K3" value="测试"> <p>
<textarea name="K4">ABCDEFG abcdefg HIJKLMN hijklmn</textarea> <p>
<input type="submit" value="ok">
</form>
</body>
</html>
点击 OK 按钮提交表单，同时使用 Fiddler 进行抓包，查看请求头域信息。可以看到，在请求 Entity 区域指明了实体内容类型：
- 实体类型：multipart/form-data
- 实体边界： boundary=------------------xxxxxxxxxxxx
查看实体内容，有以下特点：
- 表单中每个提交的元素信息都被头域中指明的边界（----xxxxx）进行分割
- 表单中每个提交的元素信息被分别取出了 name 和 value 属性
- 其中，name 属性直接写在分割线后第一行， name=xxxx 方式
- 其中，value 属性（即用户输入的数据）被隔行直接显示出来，且没有进行编码处理
另外，表单的 multipart/form-data 方式还可以用于通过表单来上传文件（如图片文件等），关于这部分信息大家可以参考《RFC 1867》官方文档说明
- 名称： Form-based File Upload in HTML
- 编号： RFC 1867
- 地址： https://tools.ietf.org/html/rfc1867
我们摘抄部分原文如下：
In addition, it defines the default ENCTYPE attribute of the FORM element using the POST METHOD to have the default value "application/x-www-form-urlencoded".
此外，它还使用 POST 方法定义了 FORM 元素的默认 ENCTYPE 属性，而且其默认值为“application/x-www-form-urlencoded”。
In addition, it defines a new MIME media type, multipart/form-data, and specifies the behavior of HTML user agents when interpreting a form with ENCTYPE="multipart/form-data" and/or <INPUT type="file"> tags.
此外，它还定义了一种新的 MIME 媒体类型 multipart/form-data，并指定了 HTML 用户代理在使用ENCTYPE="multipart/form-data" 和/或 <INPUT type="file"> 标记解释表单时的行为。
A boundary is selected that does not occur in any of the data. (This selection is sometimes done probabilisticly.) Each field of the form is sent, in the order in which it occurs in the form, as a part of the multipart stream. Each part identifies the INPUT name within the original HTML form.
选择的边界不会出现在任何数据中。(这种选择有时是概率性的。)表单的每个字段都是作为 multipart 流的一部分,并按其在表单中出现的顺序发送的。每个部分标识原始 HTML 表单中的 INPUT 类型元素的 name 属性。
下面我们通过表单实现一次图片文件的提交，设置元素属性为 type=file 类型
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表单请求类型 </title>
</head>
<body>
<form method="POST" action="c.asp" enctype="multipart/form-data">
<!-- 注意： 类型设置为 file -->
<input type="file" name="K1" > <p>
<input type="submit" value="ok">
</form>
</body>
</html>
在页面选择一张图片文件，点击 OK 按钮进行提交。通过 Fiddler 抓包。
请求头中可见： Content-Type：multipart/form-data
查看实体内容时，仍旧和前面一样，收尾位置设置边界隔离字符串，同时注明被上传文件相关属性、名称和类型。
再看一看 Fiddler 抓到请求内容的十六进制表示形式，同时用 EditPlus 编辑器也在本地打开上传使用的相同图片文件，用十六进制方式进行查看。在 Fiddler 中蓝色十六进制区域表示的是HTTP请求头域中的内容，黑色十六进制区域表示的是HTTP请求实体中的内容，即我们提交的图片文件。发现二者完全是一致的。
另外，我们再看看百度上传图片搜索功能的相关处理。在百度首页搜索框中选择“照相机”图片，上传一张本地的图片，最后打开“百度识图”搜索结果页面。
这里使用 Firefox 浏览器自带网络抓包功能，可以看到，上传图片的过程，使用的是 POST 请求方式，其请求头 Content-type 设置为 multipart/form-data，同时设置了分割的边界字符串。
3. 设置表单：enctype="text/plain"
继续设置表单 enctype 属性，其取值设置为 text / plain 方式，该方式不对提交的数据进行编码，只进行普通文本显示。编码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表单请求类型 </title>
</head>
<body>
<form method="POST" action="c.asp" enctype="text/plain">
<input type="text" name="K1" value="V1"> <p>
<input type="text" name="K2" value="V2:^#@"> <p>
<input type="text" name="K3" value="测试"> <p>
<textarea name="K4">ABCDEFG abcdefg HIJKLMN hijklmn</textarea> <p>
<input type="submit" value="ok">
</form>
</body>
</html>
同样用 Fiddler 进行抓包，其 Content-Type 设置为 text/plain 的方式。
查看实体内容，以键值对的方式显示了表单中每个元素的提交数据，这些数据没有进行任何形式的处理，只是以普通文本的方式显示出来。
4. 提交JSON格式数据：application/json
设置 application/json 方式，相当于提交到服务端的数据是序列化后的 JSON 字符串。在面向 RESTful 的接口规范时，数据的传输都是以 JSON 格式进行的。
通过 Axios 构造一个提交 JSON 格式的请求（所有非必需代码都去除了）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 提交 JSON 格式请求 </title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1> 此页面将提交 JSON 格式的请求 </h1>
<script type = "text/javascript">
axios.post('c.asp', {
name: '张三',
age: '25',
sex: '男'
})
</script>
</body>
</html>
以 Firefox 访问页面并抓包，可以看到其请求的触发模式是 XHR 方式，请求类型显示为 POST，请求头中 Content-Type 也设置为 application/json 方式。
再次查看请求参数，明显为 JSON 格式的数据类型。
