如何将jQuery.serialize（）数据转换为JSON对象？

Question

当窗体包含多个输入数组字段时，是否有更好的解决方案来转换已被jQuery函数serialize（）序列化的表单数据。我希望能够将表单数据转换为JSON对象以重新创建其他一些信息丰富的表格。所以告诉我一个更好的方法来获取序列化字符串转换为JSON对象。

<form id='sampleform'> 
    <input name='MyName' type='text' /> // Raf 

    <!--array input fields below--> 
    <input name='friendname[]' type='text' /> // Bily 
    <input name='fiendemail[]' type='text' /> // bily@someemail.com 

    <!--duplicated fields below to add more friends --> 
    <input name='friendname[]' type='text' /> // Andy 
    <input name='fiendemail[]' type='text' /> // Andy@somwhere.com 

    <input name='friendname[]' type='text' /> // Adam 
    <input name='fiendemail[]' type='text' /> // Adam@herenthere.com 
</form> 

jQuery的方法适用于获取数据

var MyForm = $("#sampleform").serialize(); 
/** result : MyName=Raf&friendname[]=Billy&fiendemail[]=bily@someemail.com&friendname[]=Andy&fiendemail[]=Andy@somwhere.com&friendname[]=Adam&fiendemail[]=Adam@herenthere.com 
*/ 

如何使这个数据到一个JSON对象？ 它应该从上面的表单中获得以下示例JSON数据。

{ 
    "MyName":"raf", 
    "friendname":[ 
     {"0":"Bily"}, 
     {"1":"Andy"}, 
     {"2":"Adam"} 
    ], 
    "friendemail":[ 
     {"0":"bily@someemail.com"}, 
     {"1":"Andy@somwhere.com"}, 
     {"2":"Adam@herenthere.com"} 
    ] 
} 

Answer 1

我最近有这个确切的问题。最初，我们使用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。

Answer 2

我使用这个非常小的jQuery插件，我已经从DocumentCloud扩展：

https://github.com/documentcloud/documentcloud/blob/master/public/javascripts/lib/jquery_extensions.js

它基本上是两行代码，但它需要_.js（Underscore.js） ，因为它基于reduce函数。

$.fn.extend({ 
    serializeJSON: function(exclude) { 
    exclude || (exclude = []); 
    return _.reduce(this.serializeArray(), function(hash, pair) { 
     pair.value && !(pair.name in exclude) && (hash[pair.name] = pair.value); 
     return hash; 
    }, {}); 
    } 
}); 

扩展：

• ，如果它是空，它不序列化的输入值
• 它可以通过将输入名称的数组到exclude参数i.e. ["password_confirm"]

排除一些投入

Answer 3

使用下划线& jQuery

var formdata = $("#myform").serializeArray(); 
var data = {}; 
_.each(formdata, function(element){ 
// Return all of the values of the object's properties. 
    var value = _.values(element); 
// name : value 
    data[value[0]] = value[1]; 
}); 
console.log(data); //Example => {name:"alex",lastname:"amador"} 

Answer 4

使用jQuery.serializeJSON插件。 它使用与在Rails params对象中找到的格式相同的格式来转换表单，这是非常标准且经过良好测试的。

Answer 5

var formdata = $("#myform").serializeArray(); 
var data = {}; 
$(formdata).each(function(index, obj){ 
    data[obj.name] = obj.value; 
}); 

简单和快速;）

Answer 6

的等效溶液至Danilo Colasso's，用.serializeArray()萨姆斯利弊（基本上它使用.reduce代替$.each）。

只需很少的努力，它就可以在S.C.的答案中实现额外功能，而无需扩展。

$(selector).serializeArray() 
    .reduce(function(accum, item) { 
     // This 'if' allows ignoring some values 
     if (-1 === [ 'ignoreThis', 'andThat' ].indexOf(item.name)) { 
      // This allows ignoring NULL values 
      if (item.value !== null) { 
       accum[item.name] = item.value; 
      } 
     } 
     return accum; 
    }, 
    { 
     // By supplying some initial values, we can add defaults 
     // for, say, disabled form controls. 
     preFilledName: preFilledValue, // optional 
     defaultName : defaultValue // optional 
    } 
); 

Answer 7

var formdata = $("#myform").serializeArray(); 

var data = {}; 

$(formdata).each(function(index, obj){ 

     if(data[obj.name] === undefined) 
       data[obj.name] = []; 

      data[obj.name].push(obj.value); 

}); 

Answer 8

我觉得这里是有很多很好的答案，我根据这些回答让我自己的功能。

function formToJSON(f) { 
    var fd = $(f).serializeArray(); 
    var d = {}; 
    $(fd).each(function() { 
     if (d[this.name] !== undefined){ 
      if (!Array.isArray(d[this.name])) { 
       d[this.name] = [d[this.name]]; 
      } 
      d[this.name].push(this.value); 
     }else{ 
      d[this.name] = this.value; 
     } 
    }); 
    return d; 
} 

//The way to use it : 
$('#myForm').submit(function(){ 
    var datas = formToJSON(this); 
    return false; 
}); 

那么，让我主要讲解为什么我喜欢这种解决方案 如果你有多次输入名称相同，所有的值将被存储在一个数组，但如果没有，则该值将直接作为存储在JSON的指数值...这是它从达尼洛Colasso的回答在JSON返回仅仅基于阵列值的不同...

所以，如果你有一个名为textarea的表单内容和倍数作者，此函数将返回到y ou：

{ 
    content : 'This is The Content', 
    authors : 
     [ 
      0: 'me', 
      1: 'you', 
      2: 'him', 
     ] 
}