javascript - 是否有更好/更简单的方法将 html 表单序列化为对象

Question

我正在发送一个表格，其中包含 radio和 checkbox输入(因此多个元素具有相同的名称)，这就是我想出的。
是否有使用纯 JavaScript 方法更快/更简单的方法来转换 HTML form成object所以我可以使用 JSON.stringify ?
没有框架或库。

function serialize_form(felement) {
    const names = new Set();
    let values = {}
    for(let i = 0; i < felement.elements.length; i++) {
        if(felement[i].name && (felement.name != undefined || felement.name != "")){
            names.add(felement[i].name)
        }
    }

    for(let name of names) {
        values[name] = felement[name].value;
    }

   console.log(names, values);

   return values;
}

Answer 1

您可以使用 FormData.keys() 进行一些简单的转换。和 FormData.getAll()

document.querySelector("form").addEventListener("submit", e => {
  e.preventDefault()
  
  const fd = new FormData(e.target)
  const obj = Object.fromEntries(Array.from(fd.keys(), key => {
    const val = fd.getAll(key)
    return [ key, val.length > 1 ? val : val.pop() ]
  }))
  
  document.querySelector("pre").innerHTML = JSON.stringify(obj, null, 2)
})

<form>
  <p><input type="text" name="text" value="text value"></p>
  <p>
    Checkboxes:
    <label>Foo <input type="checkbox" value="foo" name="checkbox"></label>
    <label>Bar <input type="checkbox" value="bar" name="checkbox"></label>
    <label>Baz <input type="checkbox" value="baz" name="checkbox"></label>
  </p>
  <p>
    Select:
    <select name="select" multiple>
      <option>foo</option>
      <option>bar</option>
      <option>baz</option>
    </select>
  </p>
  <p><button>Serialize</button></p>
</form>
<pre></pre>

请注意，这会根据进行的选择数量更改数组和字符串之间的值。如果您想要更一致的 API，即使只有一个选择，也只需为每个值使用数组。

const obj = Object.fromEntries(Array.from(fd.keys(), key => 
  [ key, fd.getAll(key) ]))