如何将html表单序列化为具有多个值的json对象答案

【问题标题】：How can serialize html form to json object with multipe value如何将html表单序列化为具有多个值的json对象
【发布时间】：2019-06-01 05:57:03
【问题描述】：

我通过以下步骤将我的 html 值发送到服务器：

用户提交表单
在 jquery 中我获取用户数据
将其转换为对象
创建 jquery ajax 数据和对象
调用ajax表单

注意：我不想使用 jquery 序列化，因为我需要获取一些组件，例如我创建的查找。

我的问题是包含多个值的复杂表单。例如，当我需要一个获取不确定数量的用户电子邮件的表单时，在它之后，将它的对象添加为数组。

<form>
    <input name="firstName">
    <input name="lastName">
    <input type="hidden" name="userId">
    <input type="checkbox" name="chkUserRole">
    <input type="checkbox" name="chkUserRole">
    <input type="checkbox" name="chkUserRole">
    <input type="checkbox" name="chkUserRole">
    <input name="userPhone">
    <input name="userPhone">
    <input name="userPhone">
    <input name="userPhone">
</form>

结果应该是：

{ 名：””，姓：””，用户身份：””， chkUserRole:[],//检查的项目。 userPhone:[],//可以是无限的电话号码，用户可以在表单中添加字段。 }

【问题讨论】：

标签： javascript jquery html typescript

【解决方案1】：

试试这个：

const form = $("#form");
form.on('submit', function(e) {
  e.preventDefault();
  const requestData = {
    firstName: $("input[name='firstName']").val(),
    lastName: $("input[name='lastName']").val(),
    chkUserRole: [],
    userPhone: []
  };
  $.each($("input[name='chkUserRole']:checked"), function(){            
    requestData.chkUserRole.push($(this).val());
  });
  $.each($("input[name='userPhone']"), function(){            
    if($(this).val().length) {
      requestData.userPhone.push($(this).val());
    }
  });
  console.log(requestData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form id="form">
    <input name="firstName">
    <input name="lastName">
    <input type="hidden" name="userId">
    <input type="checkbox" name="chkUserRole" value=1>
    <input type="checkbox" name="chkUserRole" value=2>
    <input type="checkbox" name="chkUserRole" value=3>
    <input type="checkbox" name="chkUserRole" value=4>
    <input name="userPhone">
    <input name="userPhone">
    <input name="userPhone">
    <input name="userPhone">
  <input type="submit">
</form>

【讨论】：

【解决方案2】：

使用 formData 对象：

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

【讨论】：