作者jmlntw (吉米林)
看板Web_Design
标题[心得] 用 FormData 取得表单 submit 的所有资料
时间Wed Jan 17 16:03:07 2018
假设有个表单长这样：
<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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1516176189.A.DE3.html
※ 编辑: jmlntw (36.224.27.141), 01/17/2018 16:04:04
1F：推 ian90911: 推精美上色 01/17 16:14
2F：推 oToToT: 推 01/17 17:18
※ 编辑: jmlntw (36.224.27.141), 01/17/2018 17:22:05
3F：推 nottt: 为了bbs特地上色 推 01/17 18:32
4F：推 louis70109: 推 01/17 23:20
5F：推 Kenqr: 推 01/18 10:18
6F：推 chihungtzeng: 推 01/19 09:31
7F：推 jinn: 推 谢谢分享 01/19 19:50