POST请求的编码格式

3,735 阅读2分钟

前言

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。

其中 POST 一般用来向服务器提交数据。HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。

POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。 默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)

描述
application/x-www-form-urlencoded在发送前编码所有字符(默认)
multipart/form-data不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。发送文件必须使用该编码
application/json作为请求头告诉服务端消息主体是序列化的JSON字符串。除低版本的IE,基本都支持。
text/plain空格转换为 "+" 加号,但不对特殊字符编码。

application/x-www-form-urlencoded

<form action="http://localhost:8888/task/" method="POST">
    First name: <input type="text" name="firstName" value="Mickey&"><br>
    Last name: <input type="text" name="lastName" value="Mouse "><br>
    <input type="submit" value="提交">
</form>

application/form-data

<form action="http://localhost:8888/task/" method="POST" enctype="multipart/form-data">
    First name: <input type="text" name="firstName" value="Mickey&"><br>
    Last name: <input type="text" name="lastName" value="Mouse "><br>
    <input type="submit" value="提交">
</form>

可以看出multipart/form-data不会对参数编码,使用的boundary(分割线),相当于&,boundary的值是----Web**AJv3

application/json

function addUserXhr(sendData){
    return new Promise((resolve, reject)=> {
       const xhr = new XMLHttpRequest();
       xhr.onreadystatechange = () => {
           if (xhr.readyState == 4 && xhr.status == 200) {
              const res = JSON.parse(xhr.responseText);
              if (res.code === 0) {
                  resolve(res.data);
              }
          }
       };
       xhr.open('POST', '/api/users/add', true);
       xhr.setRequestHeader('Content-Type', 'application/json');
       xhr.send(sendData);
    });
}

// 需要转成字符串后,再发送请求
const sendData = JSON.stringify({username:"你好",age:2,password:"qww"});
addUserXhr(sendData);

image.png

image.png

参考

四种常见的 POST 提交数据方式 专题

四种常见的 POST 提交数据方式