Vanilla JavaScript 将表单数据转换为具有相应名称和值的对象

Question

我正在尝试使用 vanilla JavaScript 获取表单数据。目前我现在拥有的看起来像这样submit(){  var formData = new FormData(document.querySelector('form'))  let JSON = JSON.parse(JSON.stringify(Object.fromEntries(new FormData(document.querySelector('form')).entries())));  console.log(json);}输出是一个 JSON，这是我想要的，看起来像这样5f5cf7c0123c4224fcfb193a[fee]: "0.966"5f5cf7c0123c4224fcfb193a[max_price]: "400"5f5cf7c0123c4224fcfb193b[fee]: "0.971"5f5cf7c0123c4224fcfb193b[max_price]: "600"5f5cf7c0123c4224fcfb193c[fee]: "0.976"5f5cf7c0123c4224fcfb193c[max_price]: "800"5f5cf7c0123c4224fcfb193d[standard]: "0.981"5f5cf7c0123c4224fcfb193e[fee]: "1.044"5f5cf7c0123c4224fcfb193e[max_price]: "100"5f5cf7c0123c4224fcfb193f[fee]: "1.039"5f5cf7c0123c4224fcfb193f[max_price]: "200"5f5cf7c0123c4224fcfb1938[fee]: "0.956"5f5cf7c0123c4224fcfb1938[max_price]: "100"5f5cf7c0123c4224fcfb1939[fee]: "0.961"5f5cf7c0123c4224fcfb1939[max_price]: "200"5f5cf7c0123c4224fcfb1940[fee]: "1.034"但问题是我希望数据看起来像这样5f5cf7c0123c4224fcfb193a: {  fee: "0.966",  max_price: "400"}就像在 PHP 中发送请求并获取字段一样。有什么办法可以做到这一点？我正在考虑寻找并构建一些自定义功能的开始[，但我认为这太粗略了。更新 HTML 表单             <input              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"              name="5f5cf7c0123c4224fcfb193a[max_price]"              type="number"              value="400"              step="any"            />             <input              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"              name="5f5cf7c0123c4224fcfb193a[fee]"              type="number"              value="0.966"              step="any"            />             <input              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"              name="5f5cf7c0123c4224fcfb193b[max_price]"              type="number"              value="400"              step="any"            />

Answer 1

没有内置的东西可以做到这一点。数组上的一个简单的 reduce 循环可以将其映射到您想要的格式。

var formData = new FormData(document.querySelector('form'))

var entries = formData.entries();

var data = Object.fromEntries(entries);

var result = Object.entries(data).reduce(function(result, entry) {

  const keys = entry[0].match(/([^[]+)\[([^\]]+)/)

  result[keys[1]] = result[keys[1]] || {};

  result[keys[1]][keys[2]] = entry[1];

  return result

}, {});

console.log(result);

<form>

  <input name="a[foo]" value="a-foo-1" />

  <input name="a[bar]" value="a-bar-1" />

  <input name="b[foo]" value="b-foo-1" />

  <input name="b[bar]" value="b-bar-1" />

  <input name="c[foo]" value="c-foo-1" />

  <input name="c[bar]" value="c-bar-1" />

</form>