js 獲取表單數據

三種方法：

1. formData: form.onsubmit中 構造forData對象 new FormData(formElement)
2. form.elements 遍歷，利用e.type判斷類型再獲取e.name,e.value
3. Vue 通過v-model表單輸入綁定或原生js 手動獲取
   推薦1和3

html

<form id="form" method="post">
            <select id="select1" name="select">
                <option value="" disabled selected>--請選擇--</option>
                <option value="1">--1--</option>
                <option value="2">--2--</option>
                <option value="3">--3--</option>
            </select>
            <input id="radio1" type="radio" name="sex" value="female" />female
            <input id="radio2" type="radio" name="sex" value="male" />male
            <input id="text1" type="text" name="text" />
            <fieldset>
                <legend>請做出選擇：(多選)</legend>
                <input type="checkbox" name="checkbox" value="A" />A
                <input type="checkbox" name="checkbox" value="B" />B
                <input type="checkbox" name="checkbox" value="C" />C
            </fieldset>
            <input type="submit" value="提交" />
        </form>

formData

優點：可以forData中再添加數據，方便xhr發送數據(和表單默認的數據類型，不能JSON.stringify()轉為JSON)

提交表單和上傳文件

           let serialNumber = 0
           const formElement = document.querySelector("#form")

           formElement.onsubmit = getFormData
           function getFormData(e) {
               let formData = new FormData(formElement)
               formData.append("serialNumber", ++serialNumber) //添加數據
               for ([name, value] of formData.entries()) { // 遍歷數據
                   console.log(`${name}:${value}`)
               }
               /* 手動發送數據 xhr */
               // var request = new XMLHttpRequest()
               // request.open("POST", "submitform.php")
               // request.send(formData)
               e.preventDefault()
           }

form.elements

注意：本質為HTMLCollection對象, button filedset等沒數據的元素也包含進了form.elements

            const formElement = document.querySelector("#form")
            formElement.onsubmit = getFormData
            function getFormData(e) {
                let res = []
                Array.prototype.forEach.call(form.elements, (e) => {
                    console.log(e.type, e.name, e.value) //e.nodeType是判斷元素節點 文本節點 注釋節點 屬性節點的。
                    switch (e.type) {
                        case "select-one": // select控件的類型是 select-one
                        case "text":
                        case "textarea":
                            res.push([e.name, e.value])
                            break
                        case "checkbox":
                        case "radio":
                            if (e.checked) {
                                res.push([e.name, e.value])
                            }
                            break
                        default:
                            // 其他的控件 如 button fieldset等 什么也不做
                            break
                    }
                })
                console.log(res)
                e.preventDefault()
            }