使用jQuery将表单数据转换为JavaScript对象
如何将表单的所有元素转换为JavaScript对象？
我希望有一些方法可以自动从表单中构建JavaScript对象，而不必遍历每个元素。 我不需要$('#formid').serialize();返回的字符串$('#formid').serialize(); ，也不希望$('#formid').serializeArray();返回的地图
#1楼
如果不检查每个元素，实际上是没有办法做到的。 您真正想知道的是“是否已经有人在编写将表单转换为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;
}
#2楼
由于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;
});
#3楼
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;
}
注意与真实输入同名的隐藏字段，因为它们会被覆盖。
#4楼
此函数应处理多维数组以及具有相同名称的多个元素。
到目前为止，我已经使用了几年：
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#5楼
我最近遇到了同样的问题，并提出了这个.toJSON jQuery插件 ， 该插件将表单转换为具有相同结构的JSON对象。 这对于要让用户在特定位置添加更多字段的动态生成的表单特别有用。
关键是您可能实际上希望构建一个表单，使其本身具有结构，因此，假设您要创建一个表单，以便用户在镇上插入他最喜欢的位置：您可以想象此表单代表一个
Home
dwelling
sleep
eat
watch TV
...
...
拥有一个表示此确切结构的JSON对象有多酷，因此您可以：
- 将该对象按原样存储在任何类似于CouchDB的数据库中
- 从$ _POST []服务器端读取它，并检索一个正确嵌套的数组，然后可以进行语义操作
- 使用一些服务器端脚本将其转换为格式正确的XML文件（即使您不知道其确切结构是先验的）
- 就像在任何类似Node.js的服务器脚本中一样使用它
好的，所以现在我们需要考虑表单如何表示XML文件。
当然， 标记是root ，但是我们有那个
这是标记派上用场的地方！ 我们将使用标记来表示表单/ XML表示形式中的所有容器元素，并得到如下结果：
正如您在这种形式中看到的那样，我们正在打破唯一名称的规则，但这是可以的，因为它们将被转换成元素数组，因此只能由它们在数组中的索引来引用。
此时，您可以看到表单中没有name="array[]"这样的名称，并且所有内容都很漂亮，简单且具有语义。
现在，我们希望将此表单转换为如下所示的JSON对象：
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
为此，我在这里开发了这个jQuery插件 ，有人在此Code Review线程中进行了优化，如下所示：
$.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(), ...);
我知道有很多方法可以将表单转换为JSON对象，并且可以确保.serialize()和.serializeArray()在大多数情况下都能很好地工作，并且大多数是打算使用的，但是我认为将表单作为XML结构编写的整个想法具有有意义的名称并将其转换为格式正确的JSON对象是值得尝试的，而且，如果需要检索动态生成的表单数据，则可以添加同名输入标签而不用担心，这一事实非常有用。
我希望这可以帮助别人！
#6楼
这里最简单。 我已经用一个简单的字符串替换了一个正则表达式，到目前为止，它们的工作就像一个魅力。 我不是正则表达式专家，但我敢打赌，您甚至可以填充非常复杂的对象。
var values = $(this).serialize(),
attributes = {};
values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
attributes[name] = value;
});
#7楼
有什么问题：
var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});
#8楼
对于快速，现代的解决方案，请使用JSONify jQuery插件。 以下示例从GitHub README上逐字获取。 全部归功于该插件的作者Kushal Pandya。
鉴于：
正在运行：
$('#myform').jsonify();
产生：
{"name":"Joe User","email":"[email protected]","password":"mypass"}
如果要使用此JSON对象执行jQuery POST：
$('#mybutton').click(function() {
$.post('/api/user', JSON.stringify($('#myform').jsonify()));
}
#9楼
我自己将表单编码为多维JavaScript对象，以在生产中使用它。 结果是https://github.com/serbanghita/formToObject.js 。
#10楼
使用：
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"}
#11楼
使用maček的解决方案 ，我对其进行了修改，使其可以与ASP.NET MVC以相同形式处理其嵌套/复杂对象的方式一起使用。 您要做的就是将验证部分修改为：
"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,
这将匹配并正确映射名称如下的元素：
和
#12楼
如果您使用的是Underscore.js ，则可以使用相对简洁的代码：
_.object(_.map($('#myform').serializeArray(), _.values))
#13楼
对于jQuery，有一个插件可以做到这一点jquery.serializeJSON 。 我现在已经在一些项目中成功使用了它。 它像一种魅力。
#14楼
你可以这样做：
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());
参见JSON 。
#15楼
我喜欢使用Array.prototype.reduce因为它是Array.prototype.reduce的，并且不依赖Underscore.js等：
$('#formid').serializeArray()
.reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
这类似于使用Array.prototype.map的答案，但是您不需要使用其他对象变量来使范围杂乱无章。 一站式购物。
重要说明 ：具有具有重复name属性的输入的表单是有效的HTML，实际上是一种常用方法。 在这种情况下，在此线程中使用任何答案都是不合适的（因为对象键必须是唯一的）。
#16楼
我更喜欢这种方法，因为：您不必重复两个集合，如果需要，可以使用除“名称”和“值”之外的其他东西，并且可以在将值存储到对象中之前对其进行清理（例如，如果您有不想存储的默认值）。
$.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中测试过。
#17楼
从一些较旧的答案：
$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})
#18楼
好的，我知道这已经得到了很高的评价，但是最近又提出了另一个类似的问题 ，我也直接针对这个问题。 我也想提供我的解决方案，因为它比公认的解决方案具有优势：您可以包括禁用的表单元素（这有时很重要，具体取决于用户界面的功能）
这是我对另一个SO问题的回答 ：
最初，我们使用的是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。
#19楼
我发现这个问题的最简单，最准确的方法是使用烧烤插件或这一个 （大约是0.5K字节大小）。
它也适用于多维数组。
$.fn.serializeObject = function() { return $.deparam(this.serialize()); };
#20楼
使用lodash＃set
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"
}
#21楼
对于所有给出的答案，存在一些问题，是...，如果将名称输入为名称为
name[key]数组，但它将生成为
name:{ key : value }
例如：如果我有这样的形式。
然后它将使用所有给定的答案生成这样的对象。
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()); $('form input').change(function(){ console.clear(); console.log($('form').getForm2obj()); });
Convert form data to JavaScript object with jQuery #22楼
单行代码（除了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" }
适用于渐进式Web应用程序（可以轻松地支持常规表单提交操作以及Ajax请求）
#23楼
另一个答案
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); })
JSON: FormData： https : //developer.mozilla.org/zh-CN/docs/Web/API/FormData
#24楼
const formData = new FormData(form);
let formDataJSON = {};
for (const [key, value] of formData.entries()) {
formDataJSON[key] = value;
}
#25楼
我发现Tobias Cohen的代码有问题（我没有足够的要点直接对其进行评论），否则对我有用。 如果您有两个具有相同名称的选择选项，且都具有value =“”，则原始代码将产生“ 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;
};
#26楼
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
#27楼
所有这些答案对我而言似乎都是如此。 为了简单起见，有话要说。 只要您所有的表单输入都设置了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 (eg JSON.stringify?) });
#28楼
我喜欢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;
}
并将其包装在数据数组中（也是通常期望的），最后将其作为字符串发送给App.stringify（{data：App.toJson（'#cropform：input'}}）
对于精简版本，请看问题3593046 ，在JSON2.js中查看所有包含所有最终事件的版本。 那应该涵盖了全部:)
#29楼
我发现所选解决方案有问题。
当使用具有基于数组名称的表单时，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;
}
});
请注意：这也可以在表单commit（）之外使用，因此，如果在其余代码中发生错误，则当您将链接按钮放置为“保存更改”时，表单将不会提交。
还要注意，永远不要仅使用此函数来验证表单，以收集要发送到服务器端的数据以进行验证。 使用这样的弱代码和大量分配的代码将导致XSS等。
#30楼
像老板一样将表单转换为JSON
当前来源在GitHub和Bower上 。
$ bower安装jquery-serialize-object
现在不推荐使用以下代码。
以下代码可以处理各种输入名称； 并按您期望的方式处理它们。
例如：
// 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();
魔术（JavaScript）
(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);
#31楼
将任何东西变成一个对象（未经单元测试）
测试输出：
$(document).ready(function()
{
console.log(array.print(node.objectify($("form"), {})));
console.log(array.print(node.objectify($("form"), {selector: "select"})));
});
上
将产生：
{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }