如果表单数据量小的话直接通过 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.
来源: https://www.cnblogs.com/zp106/p/11427061.html