将HTML表单序列化为JavaScript对象，支持嵌套的属性和数组。

Posted 2023-05-08

tags:

中文标题：将HTML表单序列化为JavaScript对象，支持嵌套的属性和数组。 原文标题：Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays. 项目评级：Star:1700 Fork:437 下载地址：https://github.com/marioizquierdo/jquery.serializeJSON 详情介绍

jquery.serializeJSON

在jQuery中添加.serializeJSON()方法，将表单序列化为JavaScript对象。支持与RubyonRails中使用的嵌套参数相同的格式。

安装

使用bowerbower install jquery.serializeJSON或npmnpm install jquery-serializejson进行安装，或者只需下载jquery.serializejson.js脚本即可。

并确保它包含在jQuery之后，例如：

用法示例

HTML表单：

JavaScript语言：

嵌套属性和数组可以通过命名字段来指定，语法为：name="attr[nested][nested]"。

HTML表单：

JavaScript语言：

serializeJSON函数返回一个JavaScript对象，而不是JSON字符串。该插件可能应该被称为serializeObject或类似的名称，但该插件名称已经被采用。

要转换为JSON字符串，请使用JSON.stringify方法，该方法在所有主要的新浏览器上都可用。

如果您需要支持非常旧的浏览器，只需包括json2.js polyfill（如stackoverflow上所述）。

该插件序列化.serializeArray（）支持的相同输入，遵循W3C成功控件的标准规则。特别是，包含的元素不能被禁用，并且必须包含名称属性。没有序列化提交按钮值，因为表单不是使用按钮提交的。并且文件选择元素中的数据不会序列化。

使用：类型分析值

默认情况下，字段值:string。但可以通过在字段名称后附加:type后缀来使用类型进行解析：

类型也可以用data-value-type属性指定，而不是在字段名称中添加:type后缀：

如果字段名称包含冒号（例如name="article[my::key][active]"），冒号后面的最后一部分将被混淆为无效类型。避免这种情况的一种方法是显式附加类型:string（例如name="article[my::key][active]:string"），或使用属性data-value-type="string"。数据属性优先于:type名称后缀。也可以通过 disableColonTypes: true 选项禁用:type后缀的解析。

自定义类型

使用customTypes选项可以提供您自己的解析功能。解析函数接收作为字符串的输入名称和序列化输入的DOM elment。

提供的customTypes可以包括detaultTypes中的一个，以覆盖默认行为：

插件使用的默认类型定义在$.serializeJSON.defaultOptions.defaultTypes中。

选项

在没有选项的情况下，.serializeJSON()在序列化为Rack/Rails参数时返回与常规HTML表单提交相同的结果。特别地：

可用选项：

有关这些选项的更多详细信息，请参阅下面的部分。

包括未选中的复选框

序列化表单时，最令人困惑的细节之一是输入类型复选框，因为如果选中，它会包含值，但如果未选中，则不包含任何值。

为了解决这个问题，HTML表单中的一种常见做法是对“未检查”的值使用隐藏字段：

这个解决方案在某种程度上很冗长，但可以确保渐进式增强，即使在禁用JavaScript的情况下也能工作。

但是，为了简化操作，serializeJSON包括checkboxUncheckedValue选项和将data-unchecked-value属性添加到复选框的可能性：

默认情况下是这样序列化的：

要包含所有复选框，请使用checkboxUncheckedValue选项：

data-unchecked-valueHTML属性可用于标记每个字段的特定值：

您可以同时使用选项checkboxUncheckedValue和属性data-unchecked-value，在这种情况下，该选项被用作默认值（数据属性具有优先级）。

忽略空表单字段

您可以使用.serializeJSON(skipFalsyValuesForTypes: ["string"])选项，该选项忽略任何具有空值的字符串字段（默认类型为：string，空字符串为falsy）。

另一个选项是，由于serializeJSON()是在jQuery对象上调用的，只需使用适当的jQuery选择器跳过空值（有关更多信息，请参阅Issue#28）：

忽略值错误的字段

当使用：类型时，您也可以使用skipFalsyValuesForFields: ["fullName", "address[city]"]或skipFalsyValuesForTypes: ["string", "null"]选项跳过错误值（false, "", 0, null, undefined, NaN）。

或者在应忽略的输入上设置数据属性data-skip-falsy="true"。请注意，data-skip-falsy知道field:types，所以它知道如何跳过像这样的非空输入＜code＞<；input name=“foo”value=“0”数据值type=“number”数据跳过falsy=“true”>

代码>（注意，"0"作为字符串不是伪造的，但0作为数字是伪造的）。

使用整数键作为数组索引

默认情况下，所有序列化的键都是字符串，其中包括看起来像这样的数字的键：

这就是Rack parse_nested_query的行为方式。请记住，serializeJSON输入名称格式与Rails参数完全兼容，这些参数是使用此Rack方法解析的。

使用useIntKeysAsArrayIndex选项将整数解释为数组索引：

注意：这是serializeJSON在版本2之前的默认行为。您可以使用此选项来实现向后兼容性。

选项默认值

所有选项默认值在$.serializeJSON.defaultOptions中定义。您可以对其进行修改，以避免将每次通话的选项设置为serializeJSON。例如：

选择

其他插件以类似的方式解决相同的问题：

他们都没有做我当时需要做的事情serializeJSON被创建了。将serializeJSON与备选方案区分开来的因素：

贡献