如果表單資料量小的話直接通過id或者name屬性即可獲取資料,

但如果表單有幾十上百個input 或 textarea呢?就像下面這樣的表單: 

 一個個的獲取資料很麻煩, 可以考慮用FormData + for迴圈獲取資料

給表單的form新增一個id="FormData", 用選擇器獲取form元素然後傳給FormData物件

程式碼如下:

<form id='formData'>
    <input type='text' name='name' value='zhou'>
    <input type='text' name='age' value='20'>
    <input type='text' name='sex' value='男'>
</form>
<script>
        let fd = new FormData(document.getElementById('formData'));
        for (let [name, value] of fd) {
    　　    console.log("name, value",name, value);
　　  　　}
</script>    

這樣就可以獲取表單的所有資料了.

但是存在問題, 如果input有相同的name屬性只能獲取到一個值, 後面的會把前面的覆蓋, 

對於大表單很可能會有相同的name屬性, 比如專案名稱  專案領導人姓名  技術負責人姓名等等, 在資料庫的裡的欄位很可能都是"name", 

在這種情況下怎麼正確的獲取資料並按照一定的格式發給後端?

可以給name屬性新增一個字首來確保和其他的name不一樣, 獲取資料的時候再去掉字首.

假設後端需要的資料格式是:

{

　　project: {}, // 專案資訊

　　prjLeader: {},  // 專案領導人資訊

　　skillLeader: {}  // 技術負責人資訊

}

對應的部分HTML:

<form id='formData'>
    <input type='text' name='project-name' value='project-name'>
    <input type='text' name='prjLeader-name' value='prjLeader-name'>
    <input type='text' name='skillLeader-name' value='skillLeader-name'>
</form>

對應的部分js:

let allData = {
　　project: {}, // 專案資訊

　　prjLeader: {},  // 專案領導人資訊

　　skillLeader: {}  // 技術負責人資訊
}
let fd = new FormData(document.getElementById('formData'));
        for (let [name, value] of fd) {
            // console.log("name, value",name, value);
            if ( !name.indexOf('project-') ) {
                allData.project[name.slice(8)] = value;
            } else if ( !name.indexOf('skillLeader-') ){
                allData.skillLeader[name.slice('skillLeader-'.length)] = value;
            } else if ( !name.indexOf('prjLeader-') ){
                allData.prjLeader[name.slice('prjLeader-'.length)] = value;
            }
        }

  if else 比較多的話建議改成switch, 也可以用jQuery的$('form').serialize(); 和 $('form').serializeArray(); 但是不好對資料進行分類.

程式碼解讀:

name.indexOf('project-')是在獲取到的name中查詢project-開頭的name, 如果找到了會返回找到的位置, 在這裡如果找到了肯定返回0, 沒找到返回-1,

!name.indexOf('project-') !號代表取反, 如果找到了返回0, 0取反就變成了true, 代表成功找到了project-開頭的name

接著用name.slice(8)去掉name的字首project-, 然後把去掉字首後的name作為物件的key, 該name對應的值作為物件的value, 以此類推,

這樣就自動獲取了表單的所有資料並且按照格式分類好, 然後發給後端即可.

如果要新增表單資料只需要改HTML, 不用改動js.

&n