时间戳

首页 > 解决方案 > 是否有更好/更简单的方法将 html 表单序列化为对象

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

问题描述

我正在发送一个包含radio和checkbox输入的表单（因此多个元素具有相同的名称），这就是我想出的。

有没有更快/更简单的纯 JavaScript 方法将 HTMLform转换为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;
}

标签： javascripthtml

解决方案

FormData.keys()您可以使用and进行一些简单的转换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) ]))

推荐阅读