form提交的幾種方式

背景

一直使用postman作為restful接口的調試工具,但是針對post方法的幾種類型,始終不明白其含義,今天徹底了解了下

form提交的來源

html頁面上的form表單

<form action="/handling-page" method="post">
  <div>
    <label for="name">用戶名：</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="passwd">密碼：</label>
    <input type="password" id="passwd" name="user_passwd" />
  </div>
  <div>
    <input type="submit" id="submit" name="submit_button" value="提交" />
  </div>
</form>

GET

提交的數據格式跟

元素的method屬性有關。該屬性指定了提交數據的 HTTP 方法。如果是 GET 方法，所有鍵值對會以 URL 的查詢字符串形式，提交到服務器，比如/handling-page?user_name=張三&user_passwd=123&submit_button=提交。下面就是 GET 請求的 HTTP 頭信息。

GET /handling-page?user_name=張三&user_passwd=123&submit_button=提交
Host: example.com

POST

如果是 POST 方法，所有鍵值對會連接成一行，作為 HTTP 請求的數據體發送到服務器，比如user_name=張三&user_passwd=123&submit_button=提交。下面就是 POST 請求的頭信息。

POST /handling-page HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 74

user_name=張三&user_passwd=123&submit_button=提交

FormData(XMLHttpRequest.sendf方法)

表單數據以鍵值對的形式向服務器發送，這個過程是瀏覽器自動完成的。但是有時候，我們希望通過腳本完成過程，構造和編輯表單鍵值對，然后通過XMLHttpRequest.send()方法發送。瀏覽器原生提供了 FormData 對象來完成這項工作。

//獲取表單對象
var myForm = document.getElementById('myForm');
var formData = new FormData(myForm);

//提交表單
var xhr = new XMLHttpRequest();
xhr.open('POST', '/handler/new', true);
xhr.onload = function () {
  if (xhr.status !== 200) {
    console.log('An error occurred!');
  }
};

xhr.send(formData);

enctype 屬性

表單能夠用四種編碼，向服務器發送數據。編碼格式由表單的enctype屬性決定。

1.腳本提交的post方法:GET 方法

如果表單使用GET方法發送數據，enctype屬性無效。
數據將以 URL 的查詢字符串發出。

?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.

2.腳本提交的post方法:application/x-www-form-urlencoded

如果表單用POST方法發送數據，並省略enctype屬性，那么數據以application/x-www-form-urlencoded格式發送（默認值）。

發送的 HTTP 請求如下。

Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

上面代碼中，數據體里面的%0D%0A代表換行符（\r\n）。

3.text/plain

如果表單使用POST方法發送數據，enctype屬性為text/plain，那么數據將以純文本格式發送。

Content-Type: text/plain

foo=bar
baz=The first line.
The second line.

對應postman的raw,可以自定義格式

4.multipart/form-data

如果表單使用POST方法，enctype屬性為multipart/form-data，那么數據將以混合的格式發送。

Content-Type: multipart/form-data; boundary=---------------------------314911788813839

-----------------------------314911788813839
Content-Disposition: form-data; name="foo"

bar
-----------------------------314911788813839
Content-Disposition: form-data; name="baz"

The first line.
The second line.

-----------------------------314911788813839--

這種格式也是文件上傳的格式。

postman中對應的form-data

參考

https://wangdoc.com/javascript/bom/form.html
https://www.getpostman.com/docs/v6/postman/sending_api_requests/requests