将表单数据转换为 JSON 字符串答案

【问题标题】：Covert form data to JSON string将表单数据转换为 JSON 字符串
【发布时间】：2019-06-08 05:38:20
【问题描述】：

<form name = 'test' >
    <input type='text' name = 'login'>
    <input type='email' name = 'email'>
</form>

如果我使用JSON.serialize($(form)).serializeArray();
我得到[{"name":"login","value":"a value"},{"name":"email","value":"a email"}]，而我需要{"login":"a login","email":"a email"}。怎么做？？

【问题讨论】：

如果你摆脱对 .serializeArray() 的调用会怎样
用例是什么，通常你会想要来自表单的www-url-encoded 数据
还有，JSON.serialize 是从哪里来的？

标签： javascript jquery json

【解决方案1】：

您可以将<form> 传递给FormData()，迭代FormData 实例的键、值对，将每个键和值设置为对象属性和值

let form = document.forms["test"];

let fd = new FormData(form);

let data = {};

for (let [key, prop] of fd) {
  data[key] = prop;
}

data = JSON.stringify(data, null, 2);

console.log(data);

<form name='test'>
  <input type='text' name='login' value="a login">
  <input type='email' name='email' value="a email">
</form>

【讨论】：

JSON.stringify中的null和2参数是什么意思？
@IDunno developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
啊，调试的时候会多用这个，ty！ null 用于替换过滤器，2 用于识别。
@guest271314 谢谢！
仅供参考，这可能并不总是有效，因为key 并不总是唯一的。例如：一个文件输入可以允许多个文件。如果是这样，它们都有相同的密钥。

【解决方案2】：

你可以用这个：

JSON.stringify($(form).serializeArray().reduce((acc, f) => {
  acc[f.name] = f.value
  return acc
}, {})

【讨论】：

[{"login":""},{"email":""}] 你需要合并这个对象来实现答案：p
不错的一个！ :)。

【解决方案3】：

另一种方法，使用纯 js 和 form.elements 作为 Array.reduce 的参数

var d = [].reduce.call(document.forms['test'].elements,(a,b)=>(a[b.name]=b.value,a),{});
var j = JSON.stringify(d, 0, 4);

console.log(j);

<form name='test'>
  <input type='text' name='login'>
  <input type='email' name='email'>
</form>

使用 jQuery

var data = $('form :input').toArray().reduce( (a,b) => (a[b.name]=b.value,a),{})
var json = JSON.stringify(data,0,4);

console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='test'>
  <input type='text' name='login'>
  <input type='email' name='email'>
</form>

【讨论】：

第一个示例错误地定义了d，但需要data（但字符差异不足以编辑）。否则，这很好用。

【解决方案4】：

如果你想要 javascript 对象：

 let dest = {};
 $( form )
     .serializeArray()
     .map( input => dest[ input.name ] = input.value );

还有 Json：

 console.log( JSON.stringify( dest ) );

【讨论】：

【解决方案5】：

如果你得到这个

[{"name":"login","value":"a value"},{"name":"email","value":"a email"}];

你只需要

{"name":"login","value":"a value"}

只需通过索引调用变量

var data = [{"name":"login","value":"a value"},{"name":"email","value":"a email"}];

console.log( data[0] )

【讨论】：

【解决方案6】：

使用 .serializeArray() 的真正快速解决方案是：

var objArr = JSON.serialize($(form)).serializeArray();
var obj = objArr.pop();
var strJson = JSON.serialize(obj);

【讨论】：