如何将FormData (HTML5对象)转换为JSON

我如何将条目从HTML5 FormData对象转换为JSON?

解决方案不应该使用jQuery。而且，它不应该简单地序列化整个FormData对象，而应该只序列化它的键/值条目。

当前回答

这篇文章已经有一年了……但是，我真的非常非常喜欢ES6 @dzuc的答案。然而，它是不完整的，不能够处理多个选择或复选框。已经指出了这一点，并提供了代码解决方案。我发现它们很笨重，而且没有优化。所以我写了两个基于@dzuc的版本来处理这些情况:

对于ASP样式的表单，多个项目名称可以简单重复。

let r=Array.from(fd).reduce(
  (o , [k,v]) => (
     (!o[k])
     ? {...o , [k] : v}
     : {...o , [k] : [...o[k] , v]}
   )
   ,{}
);
let obj=JSON.stringify(r);

一行高手版:

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

对于PHP样式表单，其中多个项目名称必须有一个[]后缀。

let r=Array.from(fd).reduce(
  (o , [k,v]) => (
    (k.split('[').length>1)
    ? (k=k.split('[')[0]
      , (!o[k])
      ? {...o , [k] : [v]}
      : {...o , [k] : [...o[k] , v ]}
    )
    : {...o , [k] : v}
  )
  ,{}
);
let obj=JSON.stringify(r);

一行高手版:

Array.from(fd).reduce((o,[k,v])=>((k.split('[').length>1)?(k=k.split('[')[0],(!o[k])?{...o,[k]:[v]}:{...o,[k]:[...o[k],v]}):{...o,[k]:v}),{});

支持多级数组的PHP表单扩展。

Since last time I wrote the previous second case, at work it came a case that the PHP form has checkboxes on multi-levels. I wrote a new case to support previous case and this one. I created a snippet to better showcase this case, the result show on the console for this demo, modify this to your need. Tried to optimize it the best I could without compromising performance, however, it compromise some human readability. It takes advantage that arrays are objects and variables pointing to arrays are kept as reference. No hotshot for this one, be my guest.

2018-11-11 01:33:10

其他回答

2019年，这种任务变得超级简单。

JSON.stringify(Object.fromEntries(formData));

Object.fromEntries:支持Chrome 73+， Firefox 63+， Safari 12.1

正如评论中提到的，请注意:FormData可以包含多个具有相同键的值(例如具有相同名称的复选框)。fromentries()丢弃重复项，只保留最后一个。

2019-04-26 19:57:55

你可以试试这个

formDataToJSON($('#form_example'));

# Create a function to convert the serialize and convert the form data
# to JSON
# @param : $('#form_example');
# @return a JSON Stringify
function formDataToJSON(form) {
    let obj = {};
    let formData = form.serialize();
    let formArray = formData.split("&");

    for (inputData of formArray){
        let dataTmp = inputData.split('=');
        obj[dataTmp[0]] = dataTmp[1];
    }
    return JSON.stringify(obj);
}

2018-09-17 04:08:19

我没有看到提到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>

2020-05-25 20:31:27

如果你有多个相同名称的条目，例如如果你使用<SELECT multiple>或有多个<INPUT type="checkbox">具有相同的名称，你需要注意这一点，并将值创建一个数组。否则只能得到最后选中的值。

以下是es6的现代版本:

function formToJSON( elem ) {
  let output = {};
  new FormData( elem ).forEach(
    ( value, key ) => {
      // Check if property already exist
      if ( Object.prototype.hasOwnProperty.call( output, key ) ) {
        let current = output[ key ];
        if ( !Array.isArray( current ) ) {
          // If it's not an array, convert it to an array.
          current = output[ key ] = [ current ];
        }
        current.push( value ); // Add the new value to the array.
      } else {
        output[ key ] = value;
      }
    }
  );
  return JSON.stringify( output );
}

稍旧的代码(但IE11仍然不支持，因为它不支持ForEach或FormData上的条目)

function formToJSON( elem ) {
  var current, entries, item, key, output, value;
  output = {};
  entries = new FormData( elem ).entries();
  // Iterate over values, and assign to item.
  while ( item = entries.next().value )
    {
      // assign to variables to make the code more readable.
      key = item[0];
      value = item[1];
      // Check if key already exist
      if (Object.prototype.hasOwnProperty.call( output, key)) {
        current = output[ key ];
        if ( !Array.isArray( current ) ) {
          // If it's not an array, convert it to an array.
          current = output[ key ] = [ current ];
        }
        current.push( value ); // Add the new value to the array.
      } else {
        output[ key ] = value;
      }
    }
    return JSON.stringify( output );
  }

2018-04-14 00:29:19

为我工作

                var myForm = document.getElementById("form");
                var formData = new FormData(myForm),
                obj = {};
                for (var entry of formData.entries()){
                    obj[entry[0]] = entry[1];
                }
                console.log(obj);

2019-03-26 20:15:06

如何将FormData (HTML5对象)转换为JSON

推荐文章

最新文章

标签