form 的 GET 與 POST 的差異

我覺得很重要。

懶人包

GET 的特性

最重要的點：網址會變

1. 按下 submit 的時候，網址會在後面加上 ?parameter=value
2. 不會有 request body，因為沒有東西要帶去給後端
3. 網址有長度限制
4. 網址不可以放敏感資訊
5. 會自動做 URL encoded（很重要）

舉例來說：

如果今天在輸入框輸入 a=1，如果沒有 encoded 的話，網址就會變成是 ?name=a=1，但這樣子後端會很困擾，因為後端是透過 = 來把 key 跟 value 給切割的，所以必須 encoded 成 ?name=a%3D1

補充：JavaScript 裡面有提供 encoded 跟 decoded 的 function

encodeURIComponent('a=1') => "a%3D1"
decodeURIComponent('a%3D1') => "a=1"

所以後端大概也是這樣操作的。

POST 的特性

最重要的點：網址不會變，看不出差異

1. 會把東西放在 request body 裡面
2. 可以放敏感資訊，因為從網址看不出任何東西
3. 如果表單內容有特殊文字或中文字，一樣會被 encode（可打開 payload 查看）

小知識

Q1. 為什麼你貼搜尋結果頁面給別人，別人可以跟你看到一樣的搜尋結果頁面？

A：因為搜尋結果頁面是透過 GET 方法來取得的，而 GET 是在網址上加上參數，所以只要用一樣的參數去發送 request，伺服器就能根據參數的內容 response 一樣的頁面。

Q2. 為什麼在填表單的頁面要離開時，都會跳一個視窗問你「真的要離開嗎？內容可能會遺失…」的問題？

A：因為要帶給資料到後端一定要用 POST 才可以，而 POST 的特性是「網址不會變」，所以如果表單填到一半就離開，這些內容是沒辦法被保存的，因為網址就長那樣子。所以也不可能發生你貼一個網址給別人就轉帳成功的情況。