[心得] 用 FormData 取得表單 submit 的所有資料
假設有個表單長這樣:
<form id="login" action="/login" method="post">
<input id="username" name="username" type="text">
<input id="password" name="password" type="password">
<button type="submit">Login</button>
</form>
我們要在表單送出之前(onsubmit),對使用者的輸入做一些處理,
通常簡單地會這樣寫:
document.getElementById('login').onsubmit = (e) => {
// 防止預設的表單送出行為。
e.preventDefault();
// 找到每個輸入框的元素,然後取得它們的值。
const username = document.getElementById('username');
const password = document.getElementById('password');
// 對這些值做一點事情(例如驗證等等)。
doSomething({ username, password });
}
看起來很直覺很乾淨,
但是一旦表單內的 input 很多的時候,
就必須把 input 一個一個找出來,非常麻煩且難以維護。
這時候可以用 FormData 來取得表單內所有的資料,
FormData 類似 Map,有 get() 和 set() 等方式可供使用。
document.getElementById('login').onsubmit = (e) => {
e.preventDefault();
// 取得 FormData(e.target 就是這個表單)。
const formData = new FormData(e.target);
// 用 get() 取得使用者輸入的資料。
doSomething(formData.get('username'));
doSomething(formData.get('password'));
// 用 fetch() 把資料丟給伺服器。
fetch('/login', { method: 'POST', body: formData });
}
上面這個方式會把資料用 multipart/form-data 的 content-type 傳到伺服器上,
如果想要用一般的 application/form-url-encoded,可以加上 URLSearchParams。
document.getElementBy('login').onsubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
// URLSearchParams 自動把所有資料串成 URL 參數。
// 例如 username=test&password=passw0rd 這樣。
const params = new URLSearchParams(formData);
fetch('/login', { method: 'POST', body: params })
}
這樣對於表單的預先處理就比較輕鬆了。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.224.27.141
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1516176189.A.DE3.html
※ 編輯: jmlntw (36.224.27.141), 01/17/2018 16:04:04
推
01/17 16:14,
6年前
, 1F
01/17 16:14, 1F
推
01/17 17:18,
6年前
, 2F
01/17 17:18, 2F
※ 編輯: jmlntw (36.224.27.141), 01/17/2018 17:22:05
推
01/17 18:32,
6年前
, 3F
01/17 18:32, 3F
推
01/17 23:20,
6年前
, 4F
01/17 23:20, 4F
推
01/18 10:18,
6年前
, 5F
01/18 10:18, 5F
推
01/19 09:31,
6年前
, 6F
01/19 09:31, 6F
推
01/19 19:50,
6年前
, 7F
01/19 19:50, 7F