表单提交获取值的问题

Question

有一个调查表单，希望获得用户的详细数据。
设计了一堆表单让用户来填写提交
提交的时候，目前是

params.append('title', that.title);
params.append('content', that.content);
params.append('images', that.photo);

有一个input我就要在这里写一个赋值，经常会漏写或是拼错了

有没有什么办法，用户在点 提交 的时候，直接按照input上的id或name。直接形成一个数组过来，省的来写这样一个个的赋值

Answer 1

写一个遍历input的方法就可以了吧，类似下面这种

[...document.querySelectorAll('input')].forEach(el => {
  params.append(el.name, el.value)
})

Answer 2

方法一，使用jquery
$("form").serialize()

方法二原生JS

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

var form = document.getElementById("myForm");
var formData = new FormData(form);
['name', 'psw'].forEach(item => params.append(item, formData.get(item)))

Answer 3

那就用vue 的 v-model="formData.name" 功能，
把表单需要提交的数据绑定到 data:{formData:{name:''}} 中。
可使用 axios 提交 formData 格式数据，axios发送formdata请求。

Answer 4

看起来你是要提交一个FormData,那其实你完全可以把new FormData(HTMLFormElement)；FormData支持传入一个form元素，这样就符合你的需求了
演示