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

【问题标题】：Is there a better/simpler way to serializing a html form to an object是否有更好/更简单的方法将 html 表单序列化为对象
【发布时间】：2021-03-24 17:39:30
【问题描述】：

我正在发送一个包含 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;
}

【问题讨论】：

在这里查看我对 FormData 的回答：stackoverflow.com/a/46376650/362536
developer.mozilla.org/en-US/docs/Web/API/FormData
@brad 我看到了这个问题，但从未想象过非 jquery 的答案。谢谢。
结合 FormData 和这个answer to how to serialize FormData 是这个问题的答案。

标签： javascript html

【解决方案1】：

感谢@brad 指出FormData 我能够减少我的serialize_form 函数，这导致了这个答案https://stackoverflow.com/a/46774073/9908。

function serialize_form(felement) {
            const fd = new FormData(felement);
            let object = {};


            fd.forEach((value, key) => {
            // Reflect.has in favor of: object.hasOwnProperty(key)
                if(!Reflect.has(object, key)){
                    object[key] = value;
                    return;
                }
                if(!Array.isArray(object[key])){
                    object[key] = [object[key]];
                }
                object[key].push(value);
            });
            console.log(object);
            return object;
        }

【讨论】：

Object.fromEntries(new FormData(felement))怎么样
@Phil 我刚刚看到了 jQuery 表单问题的答案，我现在正在测试它是否可以处理具有多个值的选择。如果它只是一个班轮，那就太好了。
啊，是的，它在多选或重复名称时失败

【解决方案2】：

您可以使用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) ]))

【讨论】：