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;
}
没有检查每个元素就没有办法做到这一点 . 您真正想知道的是"has someone else already written a method that converts a form to a JSON object?"以下内容应该有效 - 请注意,它只会为您提供通过POST返回的表单元素(必须具有名称) . 这是 not tested .
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;
}
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;
}
30 回答
我自己将一个表单编码为多维JavaScript对象,以便在 生产环境 中使用它 . 结果是https://github.com/serbanghita/formToObject.js .
此函数应处理多维数组以及具有相同名称的多个元素 .
到目前为止,我已经使用它几年了:
简洁是最好的 . 我使用了一个简单的字符串替换为正则表达式,到目前为止它们就像一个魅力 . 我不是正则表达专家,但我敢打赌,你甚至可以填充非常复杂的对象 .
我发现所选解决方案存在问题 .
当使用具有基于数组的名称的表单时,jQuery serializeArray()函数实际上已经死亡 .
我有一个PHP框架,它使用基于数组的字段名称,允许相同的表单在多个视图中多次放在同一页面上 . 这可以方便地在同一页面上添加,编辑和删除,而不会冲突表单模型 .
因为我想要在不必使用这个绝对基本功能的情况下对表单进行分类,所以我决定编写自己的seralizeArray():
请注意:这也可以在表单submit()之外工作,因此如果您的代码的其余部分发生错误,如果您放置在“保存更改”的链接按钮上,表单将不会提交 .
另请注意,此函数永远不应用于验证表单,仅用于收集要发送到服务器端进行验证的数据 . 使用这种弱和批量分配的代码会导致XSS等 .
我更喜欢这种方法,因为:您不必迭代2个集合,如果需要,您可以获取除“name”和“value”之外的其他内容,并且可以在将值存储在对象中之前清理它们的值(如果您有默认值,您不希望存储,例如) .
使用如下:
仅在Firefox中测试过 .
Tobias Cohen解决方案的固定版本 . 这个正确处理像
0
和''
这样的虚假值 .还有CoffeeScript版本,方便您编码:
使用lodash#set
我发现这个问题的最简单和最准确的方法是使用bbq plugin或者这个one(大小约为0.5K字节) .
it also works with multi dimensional arrays.
你可以这样做:
见JSON .
出了什么问题:
Turn anything into an object (not unit tested)
测试输出:
上
会产生:
由于XSS攻击以及可能还有很多其他问题,我不会在现场网站上使用它,但这里有一个简单的例子说明你可以做什么:
serializeArray已经完全如此 . 您只需要按照所需格式按摩数据:
注意与实际输入同名的隐藏字段,因为它们将被覆盖 .
要获得快速,现代的解决方案,请使用JSONify jQuery插件 . 下面的示例是从GitHub自述文件中逐字记录的 . 所有这些都归功于该插件的作者Kushal Pandya .
鉴于:
运行:
生产环境 :
如果你想用这个JSON对象做一个jQuery POST:
将表单转换为JSON LIKE A BOSS
当前来源是GitHub和bower .
现在不推荐使用以下代码 .
以下代码可以使用各种输入名称;并按照您的预期处理它们 .
例如:
用法
巫术(JavaScript)
所有这些答案对我来说都是如此 . 为简单起见,有一些话要说 . 只要你的所有表单输入都有name属性设置,这应该只是jim dandy .
for(var i in viewArr){
view [viewArr [i] .name] = viewArr [i] .value;
}
//在这里查看视图对象(例如JSON.stringify?)
});
单行(除了jQuery之外没有依赖项),使用固定对象绑定将函数传递给
map
方法 .它能做什么?
适用于渐进式网络应用程序(可以轻松支持常规表单提交操作以及ajax请求)
如果您使用Underscore.js,您可以使用相对简洁的:
从一些older回答:
我喜欢samuels版本,但我相信它有一个小错误 . 通常JSON发送为
不是
所以IMO的功能应该读:
并将其包装在数据数组中(通常也是如此),最后将其作为astring App.stringify发送({data:App.toJson('#cropform:input')})
对于stringify,请查看精简版本的Question 3593046,在json2.js处查看每个可能性的版本 . 这应该涵盖所有:)
好吧,我知道这已经有了一个高度赞成的答案,但最近又有了另一个similar question was asked,我也被引导到了这个问题 . 我也想提供我的解决方案,因为它提供了优于已接受解决方案的优势:您可以包含已禁用的表单元素(这有时很重要,具体取决于您的UI功能)
以下是other SO question的答案:
最初,我们使用jQuery的
serializeArray()
方法,但不包括禁用的表单元素 . 我们经常会将"sync'd"的表单元素禁用到页面上的其他源,但我们仍然需要将数据包含在序列化对象中 . 所以serializeArray()
已经出局了 . 我们使用:input
选择器来获取给定容器中的所有输入元素(启用和禁用),然后使用$.map()
来创建我们的对象 .请注意,为此,每个输入都需要一个
name
属性,该属性将是结果对象的属性名称 .这实际上与我们使用的内容略有不同 . 我们需要创建一个结构为.NET IDictionary的对象,所以我们使用了这个:(我在这里提供它,以防它有用)
我喜欢这两种解决方案,因为它们是
$.map()
函数的简单用法,并且您可以完全控制选择器(因此,最终包含在结果对象中的元素) . 此外,不需要额外的插件 . 简单的旧jQuery .使用maček's solution,我修改它以使用ASP.NET MVC在同一表单上处理其嵌套/复杂对象的方式 . 您所要做的就是将验证件修改为:
这将匹配,然后正确映射元素,如下所示:
和
没有检查每个元素就没有办法做到这一点 . 您真正想知道的是"has someone else already written a method that converts a form to a JSON object?"以下内容应该有效 - 请注意,它只会为您提供通过POST返回的表单元素(必须具有名称) . 这是 not tested .
如果输入名称像
name[key]
那样的数组,但它会像这样生成For Example : 如果我有这样的形式 .
然后它将使用所有给定的答案生成这样的对象 .
但它必须生成如下所示,任何人都希望如下所示 .
另一个答案
FormData:https://developer.mozilla.org/en-US/docs/Web/API/FormData
使用:
输出:
我最近遇到了同样的问题,并推出了this .toJSON jQuery plugin,它将表单转换为具有相同结构的JSON对象 . 这对于动态生成的表单尤其有用,您希望让用户在特定位置添加更多字段 .
关键是你可能真的想要构建一个表单,以便它本身就有一个结构,所以假设你想创建一个表单,用户在城里插入他最喜欢的地方:你可以想象这个表单代表一个
<places>...</places>
XML元素用户喜欢的地方列表,因此列出<place>...</place>
元素,每个元素包含例如<name>...</name>
元素,<type>...</type>
元素,然后是<activity>...</activity>
元素列表,以表示您可以在这样的地方执行的活动 . 所以你的XML结构是这样的:如果有一个JSON对象可以代表这个确切的结构,那将是多么酷,所以你将能够:
将此对象存储在任何类似CouchDB的数据库中
从$ _POST []服务器端读取它并检索正确嵌套的数组,然后可以进行语义操作
使用一些服务器端脚本将其转换为格式良好的XML文件(即使您不知道其先验的确切结构)
只是以某种方式使用它,因为它在任何Node.js类似的服务器脚本中
好的,现在我们需要考虑一个表单如何表示XML文件 .
当然
<form>
标签是root
,但是我们有<place>
元素,它是一个容器而不是数据元素本身,所以我们不能使用输入标签 .这是
<fieldset>
标签派上用场的地方!我们将使用<fieldset>
标记来表示表单/ XML表示中的所有容器元素,因此得到如下结果:正如你在这种形式中看到的那样,我们打破了唯一名称的规则,但这没关系,因为它们将被转换为元素数组,因此它们只能通过数组中的索引来引用 .
此时你可以看到表单里面没有
name="array[]"
这样的名字,一切都很漂亮,简单和语义 .现在我们想要这个表格要转换为JSON对象,如下所示:
为此,我开发了this jQuery plugin here,有人在this Code Review thread帮助优化,看起来像这样:
我还让this one blog post解释了这一点 .
这会将表单中的所有内容转换为JSON(甚至是收音机和复选框),您将要做的就是调用
我知道有很多方法可以将表单转换为JSON对象,并确保
.serialize()
和.serializeArray()
在大多数情况下工作得很好并且主要用于使用,但我认为将表单编写为具有有意义名称的XML结构并将其转换为完整的想法进入一个结构良好的JSON对象是值得尝试的,如果您需要检索动态生成的表单数据,那么您可以添加同名输入标记而无需担心这一事实非常有用 .我希望这可以帮助别人!
我发现托比亚斯科恩的代码存在问题(我没有足够的意见直接评论它),否则这对我有用 . 如果您有两个具有相同名称的选项,两者都带有值=“”,则原始代码将生成“name”:“”而不是“name”:[“”,“”]
我认为这可以通过在第一个if条件中添加“|| o [this.name] ==''”来解决:
有一个插件可以为jQuery,jquery.serializeJSON做到这一点 . 我现在已成功地在一些项目中使用它 . 它就像一个魅力 .
我喜欢使用
Array.prototype.reduce
因为's a one-liner, and it doesn' t依赖于Underscore.js之类:这与使用
Array.prototype.map
的答案类似,但您不需要使用其他对象变量来混淆范围 . 一站式购物 .IMPORTANT NOTE :具有重复
name
属性的输入的表单是有效的HTML,实际上是一种常见方法 . 在这种情况下,使用此线程中的任何答案都是不合适的(因为对象键必须是唯一的) .