另一种适用于选择多个或具有相同name属性的输入的方法:

function form_to_json() { const form_data = new FormData(document.querySelector('form')) const uniqueKeys = [...new Set(form_data.keys())] const obj = {} uniqueKeys.forEach((value, key) => { obj[value] = (form_data.getAll(value).length > 1) ? form_data.getAll(value) : form_data.get(value) }) const json = JSON.stringify(obj) alert(json) } <form> <input type="text" name="name" value="Cesar"></br> <select name="cars" id="cars" multiple> <option value="volvo" selected>Volvo</option> <option value="saab" selected>Saab</option> </select> <input type="button" onclick="form_to_json()" value="Ok"> </form>

可以通过使用FormData()对象来实现这一点。这个FormData对象将使用表单的当前键/值填充表单，使用每个元素的name属性填充键，使用它们提交的值填充值。它还将对文件输入内容进行编码。

例子:

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event)
{
    event.preventDefault();
    var formData = new FormData(myForm),
        result = {};

    for (var entry of formData.entries())
    {
        result[entry[0]] = entry[1];
    }
    result = JSON.stringify(result)
    console.log(result);

});

的一行程序!

Array.from(fd).reduce((obj, [k, v]) => ({...obj, [k]: v}), {});

今天我了解到firefox有对象扩展支持和数组解构!

我没有看到提到FormData。方法。

除了从FormData对象中返回与给定键相关的所有值之外，使用其他人在这里指定的object . fromentries方法也非常简单。

var formData = new FormData(document.forms[0])

var obj = Object.fromEntries(
  Array.from(formData.keys()).map(key => [
    key, formData.getAll(key).length > 1 ? 
      formData.getAll(key) : formData.get(key)
  ])
)

运行中的代码片段

var formData = new FormData(document.forms[0]) var obj = Object.fromEntries(Array.from(formData.keys()).map(key => [key, formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)])) document.write(`<pre>${JSON.stringify(obj)}</pre>`) <form action="#"> <input name="name" value="Robinson" /> <input name="items" value="Vin" /> <input name="items" value="Fromage" /> <select name="animals" multiple id="animals"> <option value="tiger" selected>Tigre</option> <option value="turtle" selected>Tortue</option> <option value="monkey">Singe</option> </select> </form>

如果您正在使用lodash，可以使用fropairs简单地完成

import {fromPairs} from 'lodash';

const object = fromPairs(Array.from(formData.entries()));

下面是一种包含处理多个值的简单方法的方法。如果一个键以[]结尾，它将值组合成一个数组(就像在旧的php约定中一样)，并从键中删除[]:

function formDataToJson(f) {
  return Object.fromEntries(Array.from(f.keys(), k =>
    k.endsWith('[]') ? [k.slice(0, -2), f.getAll(k)] : [k, f.get(k)]));
}

例如，如果你有:

const f = new FormData();
f.append("a", "1");
f.append("a", "2");
f.append("b[]", "3");
f.append("b[]", "4");
formDataToJson(f)  // --> produces {a: "1", b: ["3","4"]}