大型表单数据的获取

　　如果表单数据量小的话直接通过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.