formData 与查询字符串

Question

我想了解浏览器如何解释表单数据。我知道一个 http 请求包含 [Method][Header][URL][Params][Body]

我不知道如何适应那里的表格数据？它是被解释为参数（查询字符串）还是在 body 中发送？另外 header 中的 application/x-www-form-urlencoded 是什么？

Answer 1

表单数据确实在body中发送。

application/x-www-form-urlencoded是表格的格式。这是在 Content-Type header.

中设置的

另一种格式是multipart/form-data，如果表单有文件上传字段，通常使用这种格式。

Answer 2

表单数据确实在 POST 请求的 HTTP body 中发送

如果我分解 POST 请求：

Request line >  POST /index.php HTTP/1.1

Headers      >  Cache-Control: max-age=0
             >  Origin: http://localhost:8080
             >  Upgrade-Insecure-Requests: 1
             >  DNT: 1

The content
type header  >  Content-Type: application/x-www-form-urlencoded

Also headers >  User-Agent: Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/85.0.4183.121Safari/537.36
             >  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
             >  Sec-Fetch-Site: same-origin
             >  Sec-Fetch-Mode: navigate
             >  Sec-Fetch-User: ?1
             >  Sec-Fetch-Dest: document
             >  Referer: http://localhost:8080/index.php
             >  Accept-Encoding: gzip,deflate,br
             >  Accept-Language: cs-CZ,cs;q=0.9,en;q=0.8

Empty line   >

Body         >  fname=John&lname=Doe&formsubmitted=5000

如您所见，在其他 header 的乱七八糟的东西中（对此我深表歉意），有一个 Content-Type header，它指定了 header 的 MIME 类型HTTP Body 中的内容，对于 POST 表单，这通常是 application/x-www-form-urlencoded，这是您在上面的 HTTP 请求中看到的内容。

此处，Body 包含来自以下表格的表格数据（由 & 分隔）：

<form action="/index.php" method="POST">
    <input type="text" id="fname" name="fname" value=""><br>
    <input type="text" id="lname" name="lname" value=""><br>
    <input type="hidden" id="formsubmitted" name="formsubmitted" value="5000"><br>
    <input type="submit" value="Submit">
</form>

另一个被使用的是 multipart/form-data，引用 MIME type reference on developer.mozzila.com：“作为一种多部分文档格式，它由不同的部分组成，由边界分隔（以双破折号开头的字符串 - -). 每个部分都是自己的实体，有自己的 HTTP headers, Content-Disposition, and Content-Type for file uploading fields."，这个定义还包括下面的例子：

Content-Type: multipart/form-data; boundary=aBoundaryString
(other headers associated with the multipart document as a whole)

--aBoundaryString
Content-Disposition: form-data; name="myFile"; filename="img.jpg"
Content-Type: image/jpeg

(data)
--aBoundaryString
Content-Disposition: form-data; name="myField"

(data)
--aBoundaryString
(more subparts)
--aBoundaryString--

虽然我从未真正遇到过 multipart/form-data MIME 类型，但在处理 POST HTTP 请求时必须承认它

至于更详细地回答您的其他问题“header 中的 application/x-www-form-urlencoded 是什么？”
application/x-www-form-urlencoded是MIME类型，里面的urlencoded表示表单数据的编码方式和GET请求一样，每个字段之间用&字符分隔字段格式为 name=value

对于你写的“我知道一个 http 请求包含 [Method][Header][URL][Params][Body]”，这是错了，一个 HTTP 请求由那些组成，但不是按这个顺序，实际顺序是这样的：

Method Requested_Resource(and GET parameters if any) HTTP_Version \r\n
Headers ('\r\n' after each header)
\r\n
Body

formData 与查询字符串

formData vs query string

http

form-data