百度网盘搜索

表单格式化插件jquery.serializeJSON

前言

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

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

关于serializeJSON

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

使用

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

示例

 

HTML form(支持inputtextareaselect等标签)

javascript

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

JavaScript权威指南(第6版)(中文版) http://www.gooln.com/document/452.html

指定数据类型

获取到的属性值一般是字符串,可以通过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

忽略空表单字段

// Select only imputs that have a non-empty value
$('form :input[value!=""]').serializeJSON();
 
// Or filter them from the form
obj = $('form').find('input').not('[value=""]').serializeJSON();
 
// For more complicated filtering, you can use a function
obj = $form.find(':input').filter(function () {
          return $.trim(this.value).length > 0
      }).serializeJSON();

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

使用useIntKeyAsArrayIndex配置

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

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

默认配置Defaults

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

总结

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

posted @ 2017-06-22 15:01 临泽网 阅读(...) 评论(...) 编辑 收藏

百度网盘搜索