如何将表单的所有元素转换为JavaScript对象？
我想从我的表单中自动构建一个JavaScript对象，而不必遍历每个元素。我不想要$('#formid').serialize();返回的字符串，也不想要$('#formid').serializeArray();
答案 0 :(得分：1607)
serializeArray已经做到了。您只需按照所需格式按摩数据：
function objectifyForm(formArray) {//serialize data function
var returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
注意与实际输入同名的隐藏字段，因为它们会被覆盖。
答案 1 :(得分：429)
当前来源位于GitHub和bower。
$ bower install jquery-serialize-object
以下代码可以使用各种输入名称;并按照您的预期处理它们。
例如：
<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
"honey":{
"badger":"a"
},
"wombat":["b"],
"hello":{
"panda":["c"]
},
"animals":[
{
"name":"d",
"breed":"e"
}
],
"crazy":[
null,
[
{"wonky":"f"}
]
],
"dream":{
"as":{
"vividly":{
"as":{
"you":{
"can":"g"
}
}
}
}
}
}
$('#my-form').serializeObject();
(function($){
$.fn.serializeObject = function(){
var self = this,
json = {},
push_counters = {},
patterns = {
"validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
"key": /[a-zA-Z0-9_]+|(?=\[\])/g,
"push": /^$/,
"fixed": /^\d+$/,
"named": /^[a-zA-Z0-9_]+$/
};
this.build = function(base, key, value){
base[key] = value;
return base;
};
this.push_counter = function(key){
if(push_counters[key] === undefined){
push_counters[key] = 0;
}
return push_counters[key]++;
};
$.each($(this).serializeArray(), function(){
// skip invalid keys
if(!patterns.validate.test(this.name)){
return;
}
var k,
keys = this.name.match(patterns.key),
merge = this.value,
reverse_key = this.name;
while((k = keys.pop()) !== undefined){
// adjust reverse_key
reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
// push
if(k.match(patterns.push)){
merge = self.build([], self.push_counter(reverse_key), merge);
}
// fixed
else if(k.match(patterns.fixed)){
merge = self.build([], k, merge);
}
// named
else if(k.match(patterns.named)){
merge = self.build({}, k, merge);
}
}
json = $.extend(true, json, merge);
});
return json;
};
})(jQuery);
答案 2 :(得分：271)
出了什么问题：
var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});
答案 3 :(得分：102)
Tobias Cohen解决方案的固定版本。这个正确处理了0和''等虚假值。
jQuery.fn.serializeObject = function() {
var arrayData, objectData;
arrayData = this.serializeArray();
objectData = {};
$.each(arrayData, function() {
var value;
if (this.value != null) {
value = this.value;
} else {
value = '';
}
if (objectData[this.name] != null) {
if (!objectData[this.name].push) {
objectData[this.name] = [objectData[this.name]];
}
objectData[this.name].push(value);
} else {
objectData[this.name] = value;
}
});
return objectData;
};
还有一个CoffeeScript版本，方便您编码：
jQuery.fn.serializeObject = ->
arrayData = @serializeArray()
objectData = {}
$.each arrayData, ->
if @value?
value = @value
else
value = ''
if objectData[@name]?
unless objectData[@name].push
objectData[@name] = [objectData[@name]]
objectData[@name].push value
else
objectData[@name] = value
return objectData
答案 4 :(得分：54)
我喜欢使用Array.prototype.reduce，因为它是一个单行，并且它不依赖于Underscore.js等：
$('#formid').serializeArray()
.reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
这类似于使用Array.prototype.map的答案，但您不需要使用其他对象变量来混淆范围。一站式购物。
重要提示：包含具有重复name属性的输入的表单是有效的HTML，实际上是一种常见方法。在这种情况下使用此线程中的任何答案都是不合适的（因为对象键必须是唯一的）。
答案 5 :(得分：30)
所有这些答案对我来说都是如此。为简单起见，有一些话要说。只要你的所有表单输入都设置了name属性，这应该只适用于jim dandy。
$('form.myform').submit(function () { var $this = $(this) , viewArr = $this.serializeArray() , view = {}; for (var i in viewArr) { view[viewArr[i].name] = viewArr[i].value; } //Do stuff with view object here (e.g. JSON.stringify?) });
答案 6 :(得分：24)
如果您使用的是Underscore.js，则可以使用相对简洁的方法：
_.object(_.map($('#myform').serializeArray(), _.values))
答案 7 :(得分：21)
如果不检查每个元素，就没有办法做到这一点。你真正想知道的是“还有其他人已经编写了一个将表单转换为JSON对象的方法吗？”类似下面的内容应该有效 - 请注意，它只会为您提供通过POST返回的表单元素（必须具有名称）。这是未经过测试。
function formToJSON( selector )
{
var form = {};
$(selector).find(':input[name]:enabled').each( function() {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
}
else {
form[name] = self.val();
}
});
return form;
}
答案 8 :(得分：17)
好的，我知道这已经有了一个高度赞成的答案，但最近有另一个similar question was asked，我也被引导到了这个问题。我也想提供我的解决方案，因为它提供了优于已接受解决方案的优势：您可以包含已禁用的表单元素（有时这很重要，具体取决于UI的功能）
以下是other SO question的回答：
最初，我们使用的是jQuery的serializeArray()方法，但不包括已禁用的表单元素。我们经常会禁用与页面上其他来源“同步”的表单元素，但我们仍然需要将数据包含在序列化对象中。所以serializeArray()已经出局了。我们使用:input选择器获取给定容器中的所有输入元素（启用和禁用），然后$.map()创建我们的对象。
var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
var o = {};
o[n.name] = $(n).val();
return o;
});
console.log(obj);
请注意，要使其正常工作，您的每个输入都需要name属性，该属性将是生成对象的属性名称。
这实际上与我们使用的内容略有不同。我们需要创建一个结构为.NET IDictionary的对象，所以我们使用了这个:(我在这里提供它以防它有用）
var obj = $.map(inputs, function(n, i)
{
return { Key: n.name, Value: $(n).val() };
});
console.log(obj);
我喜欢这两种解决方案，因为它们是$.map()函数的简单用法，并且您可以完全控制选择器（因此，最终包含在结果对象中的元素）。此外，不需要额外的插件。简单的旧jQuery。
答案 9 :(得分：16)
此函数应处理多维数组以及具有相同名称的多个元素。
到目前为止，我已经使用它几年了：
jQuery.fn.serializeJSON=function() {
var json = {};
jQuery.map(jQuery(this).serializeArray(), function(n, i) {
var _ = n.name.indexOf('[');
if (_ > -1) {
var o = json;
_name = n.name.replace(/\]/gi, '').split('[');
for (var i=0, len=_name.length; i<len; i++) {
if (i == len-1) {
if (o[_name[i]]) {
if (typeof o[_name[i]] == 'string') {
o[_name[i]] = [o[_name[i]]];
}
o[_name[i]].push(n.value);
}
else o[_name[i]] = n.value || '';
}
else o = o[_name[i]] = o[_name[i]] || {};
}
}
else {
if (json[n.name] !== undefined) {
if (!json[n.name].push) {
json[n.name] = [json[n.name]];
}
json[n.name].push(n.value || '');
}
else json[n.name] = n.value || '';
}
});
return json;
};
答案 10 :(得分：15)
答案 11 :(得分：14)
在Vanilla js中使用一个简单的oneliner，该杠杆利用fromEntries（一如既往，请检查浏览器支持）：
Object.fromEntries(new FormData(form))
答案 12 :(得分：14)
对于所有的给定答案，有一些问题是......
如果输入名称为name[key]之类的数组，但它会像这样生成
name:{
key : value
}
例如： 如果我有这样的形式。
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
</form>
然后它将使用所有给定的答案生成这样的对象。
Object {
name : 'value',
name1[key1] : 'value1',
name2[key2] : 'value2',
name3[key3] : 'value3',
}
但它必须生成如下所示，任何人都希望如下所示。
Object {
name : 'value',
name1 : {
key1 : 'value1'
},
name2 : {
key2 : 'value2'
},
name3 : {
key2 : 'value2'
}
}
然后在js代码下面试试这个。
(function($){
$.fn.getForm2obj = function(){
var _ = {},_t=this;
this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); };
$.map(this.serializeArray(),function(n){
if(n.name.indexOf('[') > -1 ){
var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
$.map(keys,function(key,i){
if(key == ''){
eval("ale = Object.keys("+tmp+").length;");
if(!ale) _t.b(tmp,'[]');
if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
else _t.b(tmp += "["+ale+"]",'{}');
}else{
_t.c(tmp += "['"+key+"']",'{}');
if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
}
});
}else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
});
return _;
}
})(jQuery);
console.log($('form').getForm2obj());<!DOCTYPE html><html><head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
<input type="checkbox" name="name4[]" value="1" checked="checked">
<input type="checkbox" name="name4[]" value="2">
<input type="checkbox" name="name4[]" value="3">
</form>
</body></html>
答案 13 :(得分：12)
使用：
function form_to_json (selector) {
var ary = $(selector).serializeArray();
var obj = {};
for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
return obj;
}
输出：
{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}
答案 14 :(得分：11)
单行（没有除jQuery之外的依赖项），使用固定对象绑定传递给map方法的函数。
$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]
它做什么？
"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }
适用于渐进式网络应用程序（可以轻松支持常规表单提交操作以及ajax请求）
答案 15 :(得分：7)
从某些older回答：
$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})
答案 16 :(得分：7)
简洁是最好的。我使用了一个简单的字符串替换和正则表达式，到目前为止它们就像一个魅力。我不是正规表达专家，但我敢打赌，你甚至可以填充非常复杂的对象。
var values = $(this).serialize(),
attributes = {};
values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
attributes[name] = value;
});
答案 17 :(得分：6)
使用maček's solution，我修改它以使用ASP.NET MVC在同一表单上处理其嵌套/复杂对象的方式。您所要做的就是将验证部分修改为：
"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,
这将匹配并正确映射具有以下名称的元素：
<input type="text" name="zooName" />
和
<input type="text" name="zooAnimals[0].name" />
答案 18 :(得分：5)
我发现此问题的最简单，最准确的方法是使用bbq plugin或此one（大小约为0.5K字节）。
它也适用于多维数组。
$.fn.serializeObject = function()
{
return $.deparam(this.serialize());
};
答案 19 :(得分：5)
我发现Tobias Cohen的代码存在问题（我没有足够的要点直接评论它），否则这对我有用。如果您有两个名称相同的选项，两个值为“”，原始代码将生成“name”：“”而不是“name”：[“”，“”]
我认为可以通过在第一个if条件中添加“|| o [this.name] ==''”来解决这个问题：
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] || o[this.name] == '') {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
答案 20 :(得分：4)
有一个插件可以用于jQuery， jquery.serializeJSON 。我现在已成功地在一些项目中使用它。它就像一个魅力。
答案 21 :(得分：3)
我最近遇到了同样的问题，并提出this .toJSON jQuery plugin将表单转换为具有相同结构的JSON对象。这对于动态生成的表单尤其有用，您希望让用户在特定位置添加更多字段。
关键是你实际上可能想要构建一个表单，以便它本身就有一个结构，所以假设你想创建一个表单，用户在城里插入他最喜欢的地方：你可以想象这个表单代表一个{ {1}} XML元素，其中包含用户喜欢的地点列表，因此包含<places>...</places>元素列表，每个元素包含例如<place>...</place>元素，<name>...</name>元素，然后是<type>...</type>元素列表{1}}元素表示您可以在这样的地方执行的活动。所以你的XML结构将是这样的：
<activity>...</activity>有一个JSON对象是多么酷，这将代表这个确切的结构，所以你将能够：
好的，现在我们需要考虑一个表单如何表示XML文件。
当然<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
标记是<form>，但是我们有root元素，它是一个容器而不是数据元素本身，所以我们不能使用输入标记它
这是<place>标签派上用场的地方！我们将使用<fieldset>标记来表示表单/ XML表示中的所有容器元素，因此得到如下结果：
<fieldset>正如你在这种形式中看到的那样，我们打破了唯一名称的规则，但这很好，因为它们将被转换为元素数组，因此它们只能通过数组中的索引引用。
此时你可以看到表单里面没有<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
名字，一切都很漂亮，简单和语义。
现在我们希望将此表单转换为JSON对象，如下所示：
name="array[]"要做到这一点，我开发了this jQuery plugin here，有人在this Code Review thread帮助优化，看起来像这样：
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
我还让this one blog post更多地解释了这一点。
这会将表单中的所有内容转换为JSON（甚至是收音机和复选框），您还剩下要做的就是调用
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children('[name]');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr('name');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
obj[name] = obj[name] || [];
obj[name].push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
我知道有很多方法可以将表单转换为JSON对象，并确保$.post('script.php',('form').toJSO(), ...);
和.serialize()在大多数情况下工作得很好并且主要用于使用，但我认为
我希望这有助于某人！
答案 22 :(得分：3)
我自己将一个表单编码为多维JavaScript对象，以便在生产中使用它。结果是https://github.com/serbanghita/formToObject.js。
答案 23 :(得分：3)
在一个衬板中利用ES6优势：
$("form").serializeArray().reduce((o, {name: n, value: v}) => Object.assign(o, { [n]: v }), {});
答案 24 :(得分：3)
将任何内容变为对象（未经过单元测试）
<script type="text/javascript">
string = {};
string.repeat = function(string, count)
{
return new Array(count+1).join(string);
}
string.count = function(string)
{
var count = 0;
for (var i=1; i<arguments.length; i++)
{
var results = string.match(new RegExp(arguments[i], 'g'));
count += results ? results.length : 0;
}
return count;
}
array = {};
array.merge = function(arr1, arr2)
{
for (var i in arr2)
{
if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
arr1[i] = array.merge(arr1[i], arr2[i]);
else
arr1[i] = arr2[i]
}
return arr1;
}
array.print = function(obj)
{
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? array.print(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
}
node = {};
node.objectify = function(node, params)
{
if (!params)
params = {};
if (!params.selector)
params.selector = "*";
if (!params.key)
params.key = "name";
if (!params.value)
params.value = "value";
var o = {};
var indexes = {};
$(node).find(params.selector+"["+params.key+"]").each(function()
{
var name = $(this).attr(params.key),
value = $(this).attr(params.value);
var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
{
return '"'+arguments[1]+'"';
}).replace(/\[(.*?)\]/gi, function()
{
if (arguments[1].length == 0)
{
var index = arguments[3].substring(0, arguments[2]);
indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;
return ':{"'+indexes[index]+'"';
}
else
return ':{"'+escape(arguments[1])+'"';
})+':"'+value.replace(/[\\"]/gi, function()
{
return "\\"+arguments[0];
})+'"'+string.repeat('}', string.count(name, ']'))+"}");
o = array.merge(o, obj);
});
return o;
}
</script>
测试结果：
$(document).ready(function()
{
console.log(array.print(node.objectify($("form"), {})));
console.log(array.print(node.objectify($("form"), {selector: "select"})));
});
在
<form>
<input name='input[a]' type='text' value='text'/>
<select name='input[b]'>
<option>select</option>
</select>
<input name='otherinput[c][a]' value='a'/>
<input name='otherinput[c][]' value='b'/>
<input name='otherinput[d][b]' value='c'/>
<input name='otherinput[c][]' value='d'/>
<input type='hidden' name='anotherinput' value='hidden'/>
<input type='hidden' name='anotherinput' value='1'/>
<input type='submit' value='submit'/>
</form>
将产生：
{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }
答案 25 :(得分：3)
我发现所选解决方案存在问题。
当使用具有基于数组的名称的表单时，jQuery serializeArray（）函数实际上已经死了。
我有一个PHP框架，它使用基于数组的字段名称，允许同一个表单在多个视图中多次放在同一页面上。这可以方便地在同一页面上添加，编辑和删除，而不会冲突表单模型。
由于我想要在不必采用这种绝对基本功能的情况下对表单进行分类，我决定编写自己的seralizeArray（）：
var $vals = {};
$("#video_edit_form input").each(function(i){
var name = $(this).attr("name").replace(/editSingleForm\[/i, '');
name = name.replace(/\]/i, '');
switch($(this).attr("type")){
case "text":
$vals[name] = $(this).val();
break;
case "checkbox":
if($(this).attr("checked")){
$vals[name] = $(this).val();
}
break;
case "radio":
if($(this).attr("checked")){
$vals[name] = $(this).val();
}
break;
default:
break;
}
});
请注意：这也可以在表单submit（）之外使用，因此如果您的代码的其余部分发生错误，如果您放置在“保存更改”的链接按钮上，表单将不会提交。
另请注意，此函数永远不应用于验证表单，仅用于收集要发送到服务器端进行验证的数据。使用这种弱的和批量分配的代码会导致XSS等等。
答案 26 :(得分：3)
我更喜欢这种方法，因为：您不必迭代2个集合，如果需要，您可以获取除“name”和“value”之外的其他内容，并且可以在将值存储之前清理它们的值对象（例如，如果您有不希望存储的默认值）。
$.formObject = function($o) {
var o = {},
real_value = function($field) {
var val = $field.val() || "";
// additional cleaning here, if needed
return val;
};
if (typeof o != "object") {
$o = $(o);
}
$(":input[name]", $o).each(function(i, field) {
var $field = $(field),
name = $field.attr("name"),
value = real_value($field);
if (o[name]) {
if (!$.isArray(o[name])) {
o[name] = [o[name]];
}
o[name].push(value);
}
else {
o[name] = value;
}
});
return o;
}
像这样使用：
var obj = $.formObject($("#someForm"));
仅在Firefox中测试过。
答案 27 :(得分：2)
另一个答案
document.addEventListener("DOMContentLoaded", function() {
setInterval(function() {
var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
console.log(json)
document.querySelector('#asJSON').value = JSON.stringify(json);
}, 1000);
})<form name="userprofile" id="form">
<p>Name <input type="text" name="firstname" value="John"/></p>
<p>Family name <input name="lastname" value="Smith"/></p>
<p>Work <input name="employment[name]" value="inc, Inc."/></p>
<p>Works since <input name="employment[since]" value="2017" /></p>
<p>Photo <input type="file" /></p>
<p>Send <input type="submit" /></p>
</form>
JSON: <textarea id="asJSON"></textarea>
FormData：https://developer.mozilla.org/en-US/docs/Web/API/FormData
答案 28 :(得分：2)
要获得快速，现代的解决方案，请使用JSONify jQuery插件。下面的示例是从GitHub自述文件中逐字记录的。所有这些都归功于该插件的作者Kushal Pandya。
假设：
<form id="myform">
<label>Name:</label>
<input type="text" name="name"/>
<label>Email</label>
<input type="text" name="email"/>
<label>Password</label>
<input type="password" name="password"/>
</form>
运行：
$('#myform').jsonify();
产地：
{"name":"Joe User","email":"joe@example.com","password":"mypass"}
如果你想用这个JSON对象做一个jQuery POST：
$('#mybutton').click(function() {
$.post('/api/user', JSON.stringify($('#myform').jsonify()));
}
答案 29 :(得分：2)
我喜欢samuels版本，但我相信它有一个小错误。通常JSON作为
发送{ “coreSKU”： “PCGUYJS”， “name_de”： “不管”，...
不是
[{ “coreSKU”： “PCGUYJS”}，{ “name_de”： “不管”}，...
所以IMO的功能应该是：
App.toJson = function( selector ) {
var o = {};
$.map( $( selector ), function( n,i )
{
o[n.name] = $(n).val();
});
return o;
}
并将其包装在数据数组中（通常也是如此），最后将其作为astring发送 App.stringify（{data：App.toJson（'#cropform：input'）}）
对于精简版的Question 3593046字符串化，请查看json2.js的每个可能性版本。这应该涵盖所有：）
答案 30 :(得分：2)
let serialized = [
{ key: 'data[model][id]', value: 1 },
{ key: 'data[model][name]', value: 'product' },
{ key: 'sid', value: 'dh0un1hr4d' }
];
serialized.reduce(function(res, item) {
_.set(res, item.key, item.value);
return res;
}, {});
// returns
{
"data": {
"model": {
"id": 1,
"name": "product"
}
},
"sid": "dh0un1hr4d"
}
答案 31 :(得分：1)
由于XSS攻击，我不会在现场网站上使用它，可能还有很多其他问题，但这里有一个简单的例子说明你可以做什么：
$("#myform").submit(function(){
var arr = $(this).serializeArray();
var json = "";
jQuery.each(arr, function(){
jQuery.each(this, function(i, val){
if (i=="name") {
json += '"' + val + '":';
} else if (i=="value") {
json += '"' + val.replace(/"/g, '\\"') + '",';
}
});
});
json = "{" + json.substring(0, json.length - 1) + "}";
// do something with json
return false;
});
答案 32 :(得分：1)
int y = x + x答案 33 :(得分：1)
所以我使用了接受的答案，发现了一个重大缺陷 它不支持输入数组，如：
<input type="checkbox" name="array[]" value="1"/>
<input type="checkbox" name="array[]" value="2"/>
<input type="checkbox" name="array[]" value="3"/>
这个小改动应该解决这个问题：
function objectifyForm(inp){
var rObject = {};
for (var i = 0; i < inp.length; i++){
if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){
var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2);
if(Array.isArray(rObject[tmp])){
rObject[tmp].push(inp[i]['value']);
} else{
rObject[tmp] = [];
rObject[tmp].push(inp[i]['value']);
}
} else{
rObject[inp[i]['name']] = inp[i]['value'];
}
}
return rObject;
}
请记住将$(this).serializeArray();的输出传递给它，否则它将不起作用。
答案 34 :(得分：1)
这是使用 reduce 的单线。 Reduce是一个功能函数，它接受传递的函数的返回值，并在下一次迭代中将其与列表中的第n个值一起传递回传递的函数。
$('#formid').serializeArray().reduce((o,p) => ({...o, [p.name]: p.value}))
我们必须使用一些技巧来使它起作用：
...o（扩展语法）插入来自key: value的所有o对()中返回的对象，以使其与表示功能的{}区别p.name中包装密钥（[]）答案 35 :(得分：1)
更现代的方法是以这种方式使用reduce serializeArray()：
$('#formid').serializeArray()
.reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
这将有助于许多正常的＆＃39;例。
对于存在多个具有重复name属性的标记的常见实例，这还不够。
由于具有重复name属性的输入通常位于某些＆＃39;包装器内。 （div，ul，tr，...），就像这个例子一样：
<div class="wrapperClass">
<input type="text" name="one">
<input type="text" name="two">
</div>
<div class="wrapperClass">
<input type="text" name="one">
<input type="text" name="two">
</div>
可以使用reduce map运算符来迭代它们：
$(".wrapperClass").map(function () {
return $(this).find('*').serializeArray()
.reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
}).get();
结果将是以下格式的对象数组：
[
{
one: valueOfOne,
two: valueOfTwo
}, {
one: valueOfOne,
two: valueOfTwo
}
]
.get()运算符与map结合使用以获取基本数组而不是jQuery对象，从而提供更清晰的结果。 jQuery docs
答案 36 :(得分：1)
如果要将表单转换为javascript对象，那么最简单的解决方案（此时）是使用jQuery的each和serializeArray函数方法。
$.fn.serializeObject = function() {
var form = {};
$.each($(this).serializeArray(), function (i, field) {
form[field.name] = field.value || "";
});
return form;
};
在GitHub上托管的插件：
https://github.com/tfmontague/form-object/blob/master/README.md
可与Bower一起安装：
bower install git://github.com/tfmontague/form-object.git
答案 37 :(得分：1)
如果您要发送带有JSON的表单，则必须在发送字符串时删除[]。您可以使用jQuery函数serializeObject（）：
来实现var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
//var a = this.serializeArray();
$(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
if ($chb != null) {
if ($chb.prop('checked')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '')
return;
var elemValue = null;
if ($(this).is('select'))
elemValue = $(this).find('option:selected').val();
else
elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(elemValue || '');
}
else {
o[this.name] = elemValue || '';
}
});
return o;
}
答案 38 :(得分：0)
这使用 foreach 方法迭代由 serializeArray 返回的名称和值对，然后使用名称作为键返回一个对象。
// Feature Collection
type FeatureCollection struct {
ID string `json:"_id,omitempty" bson:"_id,omitempty"`
Features []Feature `json:"features" bson:"features"`
Type string `json:"type" bson:"type"`
}
// Individual Feature
type Feature struct {
Type string `json:"type" bson:"type"`
Properties Properties `json:"properties" bson:"properties"`
Geometry Geometry `json:"geometry" bson:"geometry"`
}
// Feature Properties
type Properties struct {
Name string `json:"name" bson:"name"`
Height uint64 `json:"height" bson:"height"`
Purchased bool `json:"purchased" bson:"purchased"`
LastUpdated string `json:"last_updated" bson:"last_updated"`
}
// Feature Geometry
type Geometry struct {
Type string `json:"type" bson:"type"`
Coordinates interface{} `json:"coordinates" bson:"coordinates"`
}
答案 39 :(得分：0)
这是一种非jQuery方式：
var getFormData = function(form) {
//Ignore the submit button
var elements = Array.prototype.filter.call(form.elements, function(element) {
var type = element.getAttribute('type');
return !type || type.toLowerCase() !== 'submit';
});
你可以像这样使用它：
function() {
var getFormData = function(form) {
//Ignore the submit button
var elements = Array.prototype.filter.call(form.elements, function(element) {
var type = element.getAttribute('type');
return !type || type.toLowerCase() !== 'submit';
});
//Make an object out of the form data: {name: value}
var data = elements.reduce(function(data, element) {
data[element.name] = element.value;
return data;
}, {});
return data;
};
var post = function(action, data, callback) {
var request = new XMLHttpRequest();
request.onload = callback;
request.open('post', action);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(JSON.stringify(data), true);
request.send();
};
var submit = function(e) {
e.preventDefault();
var form = e.target;
var action = form.action;
var data = getFormData(form);
//change the third argument in order to do something
//more intersting with the response than just print it
post(action, data, console.log.bind(console));
}
//change formName below
document.formName.onsubmit = submit;
})();
答案 40 :(得分：0)
这可以处理多个选择甚至具有相同名称的元素：
$.fn.formToJSON = function(){
pairStr=this.serialize();
let rObj={};
pairStr.split(`&`).forEach((vp)=> {
prop=vp.split(`=`)[0];
val=vp.split(`=`)[1];
if(rObj.hasOwnProperty(prop)) {
if (Array.isArray(rObj[prop])) {
rObj[prop].push(val);
} else {
rObj[prop]=[rObj[prop]];
rObj[prop].push(val);
}
} else {
rObj[prop]=val;
}
});
return JSON.stringify(rObj);
}
答案 41 :(得分：0)
function serializedArray2Object(array){
let obj = {};
array.forEach(function(item){
if(obj[item['name']] === undefined){
obj[item['name']] = item['value'];
}else if(Array.isArray(obj[item['name']])){
obj[item['name']] = [...obj[item['name']],item['value']]
}else{
obj[item['name']] = [obj[item['name']],item['value']];
}
});
return obj;
}
使用
serializedArray2Object($('#form').serializeArray())
我刚刚从 jQuery 中发现了这个函数，并写了一个转换器到对象，这样数组就变成了一个对象。
答案 42 :(得分：0)
此代码转换并保存输入类型，而不是全部转换为字符串：
jQuery.fn.serializeForm = function () {
var form = this.get(0);
var i = [];
var ret = {};
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
var name = form.elements[i].name;
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'tel':
case 'email':
case 'hidden':
case 'password':
ret[name] = encodeURIComponent(form.elements[i].value);
break;
case 'checkbox':
case 'radio':
ret[name] = form.elements[i].checked;
break;
case 'number':
ret[name] = parseFloat(form.elements[i].value);
break;
}
break;
case 'SELECT':
case 'TEXTAREA':
ret[name] = encodeURIComponent(form.elements[i].value);
break;
}
}
return ret;
};
例如这是输出：
Day: 13
Key: ""
Month: 5
OnlyPayed: true
SearchMode: "0"
Year: 2021
代替
Day: "13"
Key: ""
Month: "5"
OnlyPayed: "true"
SearchMode: "0"
Year: "2021"
答案 43 :(得分：0)
您可能不需要 jQuery 来完成此任务。 FormData 是一个完美的解决方案。
这里是使用 FormData 收集输入值，并使用 dot-prop 将值转换为嵌套对象的代码。
答案 44 :(得分：0)
此代码对我有用：
class GmailFarming:
def __init__(self, parent, controller):
self.__startSeleniumScript()
def __startSeleniumScript(self):
self.foo = 1
self.bar = 2
g = GmailFarming(None,None)
print(g.foo)
print(g.bar)
答案 45 :(得分：0)
serialize函数将JSON对象作为参数并返回serialize String。
function serialize(object) {
var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = {
'\b' : '\\b',
'\t' : '\\t',
'\n' : '\\n',
'\f' : '\\f',
'\r' : '\\r',
'"' : '\\"',
'\\' : '\\\\'
}, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"';
function _char(c) {
if (!_CHARS[c]) {
_CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16))
.slice(-4);
}
return _CHARS[c];
}
function _string(s) {
return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE;
// return str.replace('\"','').replace('\"','');
}
function serialize(h, key) {
var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v;
arr = value instanceof Array;
stack.push(value);
keys = value;
i = 0;
t = typeof value;
switch (t) {
case "object" :
if(value==null){
return null;
}
break;
case "string" :
return _string(value);
case "number" :
return isFinite(value) ? value + EMPTY : NULL;
case "boolean" :
return value + EMPTY;
case "null" :
return null;
default :
return undefined;
}
arr = value.length === undefined ? false : true;
if (arr) { // Array
for (i = value.length - 1; i >= 0; --i) {
a[i] = serialize(value, i) || NULL;
}
}
else { // Object
i = 0;
for (k in keys) {
if (keys.hasOwnProperty(k)) {
v = serialize(value, k);
if (v) {
a[i++] = _string(k) + colon + v;
}
}
}
}
stack.pop();
if (space && a.length) {
return arr
? "[" + _indent(a.join(COMMA_CR), space) + "\n]"
: "{\n" + _indent(a.join(COMMA_CR), space) + "\n}";
}
else {
return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA)
+ "}";
}
}
return serialize({
"" : object
}, "");
}
答案 46 :(得分：0)
上面的Tobias解决方案是正确的，但是，正如评论者@macek指出的那样，它不处理类型为foo [bar]的输入并将它们拆分为子对象。
这是一个仅限PHP的功能，但我仍然觉得能够在JavaScript中生成相同的结构非常有用。
我只是简单地修改了上面的Tobias代码，所以所有功劳都归功于他。这可能会变得更干净，但我只是在五分钟内掀起它并认为它可能有用。
此时它不处理多维数组或数字索引数组。也就是说，它只适用于名称foo [bar]而不是foo []。
jQuery.fn.serializeObjectPHP = function()
{
var o = {};
var re = /^(.+)\[(.*)\]$/;
var a = this.serializeArray();
var n;
jQuery.each(a, function() {
var name = this.name;
if ((n = re.exec(this.name)) && n[2]) {
if (o[n[1]] === undefined) {
o[n[1]] = {};
o[n[1]][n[2]] = this.value || '';
} else if (o[n[1]][n[2]] === undefined) {
o[n[1]][n[2]] = this.value || '';
} else {
if(!o[n[1]][n[2]].push) {
o[n[1]][n[2]] = [ o[n[1]][n[2]] ];
}
o[n[1]][n[2]].push(this.value || '');
}
} else {
if (n && !n[2]) {
name = n[1];
}
if (o[name] !== undefined) {
if (!o[name].push) {
o[name] = [o[name]];
}
o[name].push(this.value || '');
} else {
o[name] = this.value || '';
}
}
});
return o;
};
答案 47 :(得分：0)
这是对Tobias Cohen函数的改进，它适用于多维数组：
然而，这不是一个jQuery插件，但如果你想以这种方式使用它只需要几秒钟就可以使用它：只需替换函数声明包装器：
function serializeFormObject(form)
{
...
}
使用：
$.fn.serializeFormObject = function()
{
var form = this;
...
};
我想它与macek的解决方案类似，它做同样的事情，但我认为这有点清洁和简单。我还将macek的测试用例输入到小提琴中，并添加了一些额外的。到目前为止，这对我很有用。
function serializeFormObject(form)
{
function trim(str)
{
return str.replace(/^\s+|\s+$/g,"");
}
var o = {};
var a = $(form).serializeArray();
$.each(a, function() {
var nameParts = this.name.split('[');
if (nameParts.length == 1) {
// New value is not an array - so we simply add the new
// value to the result object
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
}
else {
// New value is an array - we need to merge it into the
// existing result object
$.each(nameParts, function (index) {
nameParts[index] = this.replace(/\]$/, '');
});
// This $.each merges the new value in, part by part
var arrItem = this;
var temp = o;
$.each(nameParts, function (index) {
var next;
var nextNamePart;
if (index >= nameParts.length - 1)
next = arrItem.value || '';
else {
nextNamePart = nameParts[index + 1];
if (trim(this) != '' && temp[this] !== undefined)
next = temp[this];
else {
if (trim(nextNamePart) == '')
next = [];
else
next = {};
}
}
if (trim(this) == '') {
temp.push(next);
} else
temp[this] = next;
temp = next;
});
}
});
return o;
}
答案 48 :(得分：0)
Javascript / jQuery单行代码-还可在较旧版本上使用（ES6之前的版本）：
$('form').serializeArray().reduce((f,c) => {f[c['name']]=(f[c['name']])?[].concat(f[c['name']],c['value']):c['value']; return f}, {} );
答案 49 :(得分：0)
我的库中的代码 phery 得到了一个序列化例程，可以处理非常复杂的表单（比如在演示https://github.com/pocesar/phery/blob/master/demo.php#L1664中），并且它不是一个适合所有人的。它实际上检查每个字段的类型。例如，一个无线电盒与一个范围不同，它与keygen不同，与select multiple不同。我的功能涵盖了所有，你可以看到 它在https://github.com/pocesar/phery/blob/master/phery.js#L1851。
serializeForm:function (opt) {
opt = $.extend({}, opt);
if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
opt['disabled'] = false;
}
if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
opt['all'] = false;
}
if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
opt['empty'] = true;
}
var
$form = $(this),
result = {},
formValues =
$form
.find('input,textarea,select,keygen')
.filter(function () {
var ret = true;
if (!opt['disabled']) {
ret = !this.disabled;
}
return ret && $.trim(this.name);
})
.map(function () {
var
$this = $(this),
radios,
options,
value = null;
if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
if ($this.is('[type="radio"]')) {
radios = $form.find('[type="radio"][name="' + this.name + '"]');
if (radios.filter('[checked]').size()) {
value = radios.filter('[checked]').val();
}
} else if ($this.prop('checked')) {
value = $this.is('[value]') ? $this.val() : 1;
}
} else if ($this.is('select')) {
options = $this.find('option').filter(':selected');
if ($this.prop('multiple')) {
value = options.map(function () {
return this.value || this.innerHTML;
}).get();
} else {
value = options.val();
}
} else {
value = $this.val();
}
return {
'name':this.name || null,
'value':value
};
}).get();
if (formValues) {
var
i,
value,
name,
$matches,
len,
offset,
j,
fields;
for (i = 0; i < formValues.length; i++) {
name = formValues[i].name;
value = formValues[i].value;
if (!opt['all']) {
if (value === null) {
continue;
}
} else {
if (value === null) {
value = '';
}
}
if (value === '' && !opt['empty']) {
continue;
}
if (!name) {
continue;
}
$matches = name.split(/\[/);
len = $matches.length;
for (j = 1; j < len; j++) {
$matches[j] = $matches[j].replace(/\]/g, '');
}
fields = [];
for (j = 0; j < len; j++) {
if ($matches[j] || j < len - 1) {
fields.push($matches[j].replace("'", ''));
}
}
if ($matches[len - 1] === '') {
offset = assign_object(result, fields, [], true, false, false);
if (value.constructor === Array) {
offset[0][offset[1]].concat(value);
} else {
offset[0][offset[1]].push(value);
}
} else {
assign_object(result, fields, value);
}
}
}
return result;
}
它是我的库 phery 的一部分，但它可以移植到您自己的项目中。它创建了应该有数组的数组，它从select，normalize复选框选项中获取正确的选项等。如果你想将它转换为JSON（一个真正的JSON字符串），只需做JSON.stringify($('form').serializeForm());
答案 50 :(得分：0)
此解决方案更好。如果未选中该复选框，则此处的一些更受欢迎的选项不会更正句柄复选框。
getData: function(element){
//@todo may need additional logic for radio buttons
var select = $(element).find('select');
var input = $(element).find('input');
var inputs = $.merge(select,input);
var data = {};
//console.log(input,'input');
$.each(inputs,function(){
if($(this).attr('type') != undefined){
switch($(this).attr('type')){
case 'checkbox':
data[$(this).attr('name')] = ( ($(this).attr('checked') == 'checked') ? $(this).val():0 );
break;
default:
data[$(this).attr('name')] = $(this).val();
break;
}
}
else{
data[$(this).attr('name')] = $(this).val();
}
})
return data;
}
答案 51 :(得分：0)
我编写了一个jQuery模块jsForm，即使对于非常复杂的表单也可以执行此双向模式（允许集合和其他更复杂的结构）。
它使用字段的名称（加上一些特殊的集合类）并匹配JSON对象。它允许自动复制DOM元素以进行收集和数据处理：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
<script>
$(function(){
// Some JSON data
var jsonData = {
name: "TestName", // Standard inputs
description: "long Description\nMultiline", // Textarea
links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}], // Lists
active: true, // Checkbox
state: "VISIBLE" // Selects (enums)
};
// Initialize the form, prefix is optional and defaults to data
$("#details").jsForm({
data:jsonData
});
$("#show").click(function() {
// Show the JSON data
alert(JSON.stringify($("#details").jsForm("get"), null, " "));
});
});
</script>
</head>
<body>
<h1>Simpel Form Test</h1>
<div id="details">
Name: <input name="data.name"/><br/>
<input type="checkbox" name="data.active"/> active<br/>
<textarea name="data.description"></textarea><br/>
<select name="data.state">
<option value="VISIBLE">visible</option>
<option value="IMPORTANT">important</option>
<option value="HIDDEN">hidden</option>
</select>
<fieldset>
<legend>Links</legend>
<ul class="collection" data-field="data.links">
<li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
</ul>
</fieldset>
<button class="add" data-field="data.links">add a link</button><br/>
Additional field: <input name="data.addedField"/>
</div>
<button id="show">Show Object</button>
</body>
</html>
答案 52 :(得分：0)
我最近遇到了同样的问题所以我开发了一个函数，允许解析表单的控件以获取控件ID /值并将其转换为JSON。
它足够灵活，可以添加更多控件。您只需指定控件类型和要解释为值的属性。
您可以找到the full script here。
优点是它只需要实际需要的数据，而无需拖动整个对象。
缺点是，如果您有嵌套选项，则需要相应地为ID添加前缀，以便可以对其特定组使用重复选项。
我希望这有帮助！
答案 53 :(得分：0)
我不得不无耻地自我宣传我的表格库。
它可以执行以下操作：序列化，反序列化，清除＆amp;提交表格。
我之所以这样做是因为form2js / js2form没有得到维护，也没有那么灵活。我希望快。我们在生产中使用它，因为这是form2js / js2form兼容。
答案 54 :(得分：-1)
创建地图并循环所有字段，保存其值。
var params = {};
$("#form").find("*[name]").each(function(){
params[this.getAttribute("name")] = this.value;
});
答案 55 :(得分：-1)
此函数返回转换为正确类型的所有值;
bool / string /（整数/浮点数）可能
你有点需要jQuery，但是因为serializeArray也是jQuery，所以没什么大不了的。
theScrollView.contentSize = CGSizeMake(width, height)
答案 56 :(得分：-7)
使用此：
var sf = $('#mainForm').serialize(); // URL encoded string
sf = sf.replace(/"/g, '\"'); // Be sure all "s are escaped
sf = '{"' + sf.replace(/&/g, '","'); // Start "object", replace tupel delimiter &
sf = sf.replace(/=/g, '":"') + '"}'; // Replace equal sign, add closing "object"
// Test the "object"
var formdata = eval("(" + sf + ")");
console.log(formdata);
即使在非常复杂的形式上，它也像魅力一样。