轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / 表单格式化插件jquery.serializeJSON

表单格式化插件jquery.serializeJSON

前言

前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。

而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。

关于serializeJSON

使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。

使用

下载:https://github.com/marioizquierdo/jquery.serializeJSON

只需要在jQuery或者Zepto时候引入即可

示例

 

HTML form(支持inputtextareaselect等标签)

javascript

serializeJSON方法返回一个JS对象,并非JSON字符串。可以使用 JSON.stringify 转换成字符串(注意IE8兼容性)。

指定数据类型

获取到的属性值一般是字符串,可以通过HTML指定类型 : type 进行强制转换。

数据类型也可以指定在 data-value-type 属性中,代替 :type 标记。

options配置

默认配置

  • Values始终为字符串(除非在input names使用:types
  • Keys始终为字符串(默认不自动检测是否需要转换为数组)
  • 未选择的checkboxes会被忽略
  • disabledelements会被忽略

自定义配置

写法 释义
checkboxUncheckedValue: string 针对未勾选的checkboxes,设定值
parseBooleans: true 自动检测转换”true”、”false”为布尔值true、false
parseNumbers: true 自动检测转换”1″、”33.33″、”-44″为数字1、33.33、-44
parseNulls: true 自动检测字符串”null”为null
parseAll: true 自动检测转换以上类型的字符串
parseWithFunction: function 自定义转换函数 function(value, name){return parsedValue}
customTypes: {} 自定义:types覆盖默认types,如{type: function(value){…}}
defaultTypes: {defaultTypes} 重新定义所有的:types,如{type: function(value){…}}
useIntKeysAsArrayIndex: true 当keys为整数时,将序列化为数组

 包含未勾选的checkboxes

serializeJSON 支持 checkboxUncheckedValue 配置,或者可以在checkboxes添加 data-unchecked-value 属性。

默认方法:

上面的写法会忽略未勾选的复选框。如果需要包含,则可以使用以下方法:

1. 配置checkboxUncheckedValue

2. 添加data-unchecked-value属性

自动检测转换类型

默认的类型为字符串 :string ,可以通过配置转换为其它类型

在极少数情况下,可以使用自定义转换函数

自定义类型

可以使用 customTypes 配置自定义类型或者覆盖默认类型($.serializeJSON.defaultOptions.defaultTypes

忽略空表单字段

使用整数keys作为数组的顺序

使用useIntKeyAsArrayIndex配置

按照默认的方法,结果为:

使用useIntKeyAsArrayIndex可以将记过转换为数组并制定顺序

默认配置Defaults

所有的默认配置均定义在 $.serializeJSON.defaultOptions,可以进行修改。

总结

这个插件支持的配置非常丰富,自定义程度很高,带来很大的便捷性。

45/470
47/470

相关阅读

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子