Fw: [心得] 用 FormData 取得表單 submit 的所有資料

看板Ajax作者jmlntw (吉米林)時間6年前 (2018/01/17 16:09)推噓2(2推 0噓 0→)

留言2則, 2人參與討論串1/1

※ [本文轉錄自 Web_Design 看板 #1QNmCztZ ] 作者: 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://www.ptt.cc/bbs/Web_Design/M.1516176189.A.DE3.html ※ 編輯: jmlntw (36.224.27.141), 01/17/2018 16:04:04 ※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: jmlntw (36.224.27.141), 01/17/2018 16:09:50 ※ 編輯: jmlntw (36.224.27.141), 01/17/2018 17:22:40