UDN-企业互联网技术人气社区

板块导航

浏览  : 527
回复  : 2

[jQuery] 表单格式化插件jquery.serializeJSON

[复制链接]
泡泡兔的头像 楼主
发表于 2016-12-29 15:10:49 | 显示全部楼层 |阅读模式
  前言

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

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

  关于serializeJSON

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

  使用

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

  只需要在jQuery或者Zepto时候引入即可
  1. <scripttype="text/JavaScript" src="jquery.js"></script>
  2. <scripttype="text/JavaScript" src="jquery.serializejson.js"></script>
复制代码

  示例

  HTML form (支持 input 、 textarea 、 select 等标签)
  1. <formid="my-profile">
  2.     <!-- simpleattribute -->
  3.     <inputtype="text" name="fullName"              value="Mario Izquierdo" />

  4.     <!-- nestedattributes -->
  5.     <inputtype="text" name="address[city]"        value="San Francisco" />
  6.     <inputtype="text" name="address[state][name]"  value="California" />
  7.     <inputtype="text" name="address[state][abbr]"  value="CA" />

  8.     <!-- array -->
  9.     <inputtype="text" name="jobbies[]"            value="code" />
  10.     <inputtype="text" name="jobbies[]"            value="climbing" />

  11.     <!-- textareas, checkboxes ... -->
  12.     <textarea              name="projects[0][name]">serializeJSON</textarea>
  13.     <textarea              name="projects[0][language]">JavaScript</textarea>
  14.     <inputtype="hidden"  name="projects[0][popular]" value="0" />
  15.     <inputtype="checkbox" name="projects[0][popular]" value="1" checked />

  16.     <textarea              name="projects[1][name]">tinytest.js</textarea>
  17.     <textarea              name="projects[1][language]">JavaScript</textarea>
  18.     <inputtype="hidden"  name="projects[1][popular]" value="0" />
  19.     <inputtype="checkbox" name="projects[1][popular]" value="1"/>

  20.     <!-- select -->
  21.     <selectname="selectOne">
  22.         <optionvalue="paper">Paper</option>
  23.         <optionvalue="rock" selected>Rock</option>
  24.         <optionvalue="scissors">Scissors</option>
  25.     </select>

  26.     <!-- selectmultipleoptions, justnameitas anarray[] -->
  27.     <selectmultiplename="selectMultiple[]">
  28.         <optionvalue="red"  selected>Red</option>
  29.         <optionvalue="blue" selected>Blue</option>
  30.         <optionvalue="yellow">Yellow</option>
  31.     </select>
  32. </form>
复制代码

  JavaScript :
  1. $('#my-profile').serializeJSON();

  2. // returns =>
  3. {
  4.     fullName: "Mario Izquierdo",

  5.     address: {
  6.     city: "San Francisco",
  7.     state: {
  8.         name: "California",
  9.         abbr: "CA"
  10.         }
  11.     },

  12.     jobbies: ["code", "climbing"],

  13.     projects: {
  14.         '0': { name: "serializeJSON", language: "JavaScript", popular: "1" },
  15.         '1': { name: "tinytest.js",  language: "JavaScript", popular: "0" }
  16.     },

  17.     selectOne: "rock",
  18.     selectMultiple: ["red", "blue"]
  19. }
复制代码

  serializeJSON 方法返回一个JS对象,并非JSON字符串。可以使用 JSON.stringify 转换成字符串(注意IE8兼容性)。
  1. var jsonString = JSON.stringify(obj);
复制代码

  指定数据类型

  获取到的属性值一般是字符串,可以通过HTML指定类型 : type 进行强制转换。
  1. <form>
  2.     <inputtype="text" name="notype"          value="default type is :string"/>
  3.     <inputtype="text" name="string:string"    value=":string type overrides parsing options"/>
  4.     <inputtype="text" name="excluded:skip"    value="Use :skip to not include this field in the result"/>

  5.     <inputtype="text" name="number[1]:number"          value="1"/>
  6.     <inputtype="text" name="number[1.1]:number"        value="1.1"/>
  7.     <inputtype="text" name="number[other stuff]:number" value="other stuff"/>

  8.     <inputtype="text" name="boolean[true]:boolean"      value="true"/>
  9.     <inputtype="text" name="boolean[false]:boolean"    value="false"/>
  10.     <inputtype="text" name="boolean[0]:boolean"        value="0"/>

  11.     <inputtype="text" name="null[null]:null"            value="null"/>
  12.     <inputtype="text" name="null[other stuff]:null"    value="other stuff"/>

  13.     <inputtype="text" name="auto[string]:auto"          value="text with stuff"/>
  14.     <inputtype="text" name="auto[0]:auto"              value="0"/>
  15.     <inputtype="text" name="auto[1]:auto"              value="1"/>
  16.     <inputtype="text" name="auto[true]:auto"            value="true"/>
  17.     <inputtype="text" name="auto[false]:auto"          value="false"/>
  18.     <inputtype="text" name="auto[null]:auto"            value="null"/>
  19.     <inputtype="text" name="auto[list]
  20. :auto"            value="[1, 2, 3]"/>

  21.     <inputtype="text" name="array[empty]:array"        value="[]"/>
  22.     <inputtype="text" name="array[list]
  23. :array"          value="[1, 2, 3]"/>

  24.     <inputtype="text" name="object[empty]:object"      value="{}"/>
  25.     <inputtype="text" name="object[dict]:object"        value='{"my": "stuff"}'/>
  26. </form>
  27. $('form').serializeJSON();

  28. // returns =>
  29. {
  30.     "notype": "default type is :string",
  31.     "string": ":string type overrides parsing options",
  32.     // :skip type removes the field from the output
  33.     "number": {
  34.         "1": 1,
  35.         "1.1": 1.1,
  36.         "other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number)
  37.     },
  38.     "boolean": {
  39.         "true": true,
  40.         "false": false,
  41.         "0": false, // <-- "false", "null", "undefined", "", "0" parse as false
  42.     },
  43.     "null": {
  44.         "null": null, // <-- "false", "null", "undefined", "", "0" parse as null
  45.         "other stuff": "other stuff"
  46.     },
  47.     "auto": { // works as the parseAll option
  48.         "string": "text with stuff",
  49.         "0": 0,        // <-- parsed as number
  50.         "1": 1,        // <-- parsed as number
  51.         "true": true,  // <-- parsed as boolean
  52.         "false": false, // <-- parsed as boolean
  53.         "null": null,  // <-- parsed as null
  54.         "list": "[1, 2, 3]" // <-- array and object types are not auto-parsed
  55.     },
  56.     "array": { // <-- works using JSON.parse
  57.         "empty": [],
  58.         "not empty": [1,2,3]
  59.     },
  60.     "object": { // <-- works using JSON.parse
  61.         "empty": {},
  62.         "not empty": {"my": "stuff"}
  63.     }
  64. }
复制代码

  数据类型也可以指定在 data-value-type 属性中,代替 :type 标记。
  1. <form>
  2.   <inputtype="text" name="number[1]"    data-value-type="number"  value="1"/>
  3.   <inputtype="text" name="number[1.1]"  data-value-type="number"  value="1.1"/>
  4.   <inputtype="text" name="boolean[true]" data-value-type="boolean" value="true"/>
  5.   <inputtype="text" name="null[null]"    data-value-type="null"    value="null"/>
  6.   <inputtype="text" name="auto[string]"  data-value-type="auto"    value="0"/>
  7. </form>
复制代码

  options配置

  默认配置

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

  自定义配置
写法
释义
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. <form>
  2.   <inputtype="checkbox" name="check1" value="true" checked/>
  3.   <inputtype="checkbox" name="check2" value="true"/>
  4.   <inputtype="checkbox" name="check3" value="true"/>
  5. </form>
  6. $('form').serializeJSON();

  7. // returns =>
  8. {'check1': 'true'} // Note that check2 and check3 are not included because they are not checked
复制代码

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

  1. 配置 checkboxUncheckedValue
  1. $('form').serializeJSON({checkboxUncheckedValue: "false"});

  2. // returns =>
  3. {'check1': 'true', check2: 'false', check3: 'false'}
复制代码

  2. 添加 data-unchecked-value 属性
  1. <formid="checkboxes">
  2.   <inputtype="checkbox" name="checked[bool]"  value="true" data-unchecked-value="false" checked/>
  3.   <inputtype="checkbox" name="checked[bin]"  value="1"    data-unchecked-value="0"    checked/>
  4.   <inputtype="checkbox" name="checked[cool]"  value="YUP"                              checked/>

  5.   <inputtype="checkbox" name="unchecked[bool]"  value="true" data-unchecked-value="false" />
  6.   <inputtype="checkbox" name="unchecked[bin]"  value="1"    data-unchecked-value="0" />
  7.   <inputtype="checkbox" name="unchecked[cool]"  value="YUP" /> <!-- Nouncheckedvaluespecified -->
  8. </form>
  9. $('form#checkboxes').serializeJSON(); // Note no option is used

  10. // returns =>
  11. {
  12.   'checked': {
  13.     'bool':  'true',
  14.     'bin':  '1',
  15.     'cool':  'YUP'
  16.   },
  17.   'unchecked': {
  18.     'bool': 'false',
  19.     'bin':  '0'
  20.     // Note that unchecked cool does not appear, because it doesn't use data-unchecked-value
  21.   }
  22. }
复制代码

  自动检测转换类型

  默认的类型为字符串 :string ,可以通过配置转换为其它类型
  1. $('form').serializeJSON({parseNulls: true, parseNumbers: true});

  2. // returns =>
  3. {
  4.   "bool": {
  5.     "true": "true", // booleans are still strings, because parseBooleans was not set
  6.     "false": "false",
  7.   }
  8.   "number": {
  9.     "0": 0, // numbers are parsed because parseNumbers: true
  10.     "1": 1,
  11.     "2.2": 2.2,
  12.     "-2.25": -2.25,
  13.   }
  14.   "null": null, // "null" strings are converted to null becase parseNulls: true
  15.   "string": "text is always string",
  16.   "empty": ""
  17. }
复制代码

  在极少数情况下,可以使用自定义转换函数
  1. var emptyStringsAndZerosToNulls = function(val, inputName) {
  2.   if (val === "") return null; // parse empty strings as nulls
  3.   if (val === 0)  return null; // parse 0 as null
  4.   return val;
  5. }

  6. $('form').serializeJSON({parseWithFunction: emptyStringsAndZerosToNulls, parseNumbers: true});

  7. // returns =>
  8. {
  9.   "bool": {
  10.     "true": "true",
  11.     "false": "false",
  12.   }
  13.   "number": {
  14.     "0": null, // <-- parsed with custom function
  15.     "1": 1,
  16.     "2.2": 2.2,
  17.     "-2.25": -2.25,
  18.   }
  19.   "null": "null",
  20.   "string": "text is always string",
  21.   "empty": null // <-- parsed with custom function
  22. }
复制代码

  自定义类型 

  可以使用 customTypes 配置自定义类型或者覆盖默认类型( $.serializeJSON.defaultOptions.defaultTypes )
  1. <form>
  2.   <inputtype="text" name="scary:alwaysBoo" value="not boo"/>
  3.   <inputtype="text" name="str:string"      value="str"/>
  4.   <inputtype="text" name="number:number"  value="5"/>
  5. </form>
  6. $('form').serializeJSON({
  7.   customTypes: {
  8.     alwaysBoo: function(str) { // value is always a string
  9.       return "boo";
  10.     },
  11.     string: function(str) { // all strings will now end with " override"
  12.       return str + " override";
  13.     }
  14.   }
  15. });

  16. // returns =>
  17. {
  18.   "scary": "boo",        // <-- parsed with type :alwaysBoo
  19.   "str": "str override", // <-- parsed with new type :string (instead of the default)
  20.   "number": 5,          // <-- the default :number still works
  21. }
复制代码

  忽略空表单字段
  1. // Select only imputs that have a non-empty value
  2. $('form :input[value!=""]').serializeJSON();

  3. // Or filter them from the form
  4. obj = $('form').find('input').not('[value=""]').serializeJSON();

  5. // For more complicated filtering, you can use a function
  6. obj = $form.find(':input').filter(function () {
  7.           return $.trim(this.value).length > 0
  8.       }).serializeJSON();
复制代码

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

  使用 useIntKeyAsArrayIndex 配置
  1. <form>
  2.   <inputtype="text" name="arr[0]" value="foo"/>
  3.   <inputtype="text" name="arr[1]" value="var"/>
  4.   <inputtype="text" name="arr[5]" value="inn"/>
  5. </form>
复制代码

  按照默认的方法,结果为:
  1. $('form').serializeJSON();

  2. // returns =>
  3. {'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}
复制代码

  使用 useIntKeyAsArrayIndex 可以将记过转换为数组并制定顺序
  1. $('form').serializeJSON({useIntKeysAsArrayIndex: true});

  2. // returns =>
  3. {'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}
复制代码

  默认配置Defaults

  所有的默认配置均定义在 $.serializeJSON.defaultOptions ,可以进行修改。
  1. $.serializeJSON.defaultOptions.parseAll = true; // parse booleans, numbers and nulls by default

  2. $('form').serializeJSON(); // No options => then use $.serializeJSON.defaultOptions

  3. // returns =>
  4. {
  5.   "bool": {
  6.     "true": true,
  7.     "false": false,
  8.   }
  9.   "number": {
  10.     "0": 0,
  11.     "1": 1,
  12.     "2.2": 2.2,
  13.     "-2.25": -2.25,
  14.   }
  15.   "null": null,
  16.   "string": "text is always string",
  17.   "empty": ""
  18. }
复制代码

  总结

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

相关帖子

发表于 2016-12-29 15:11:21 来自手机 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

发表于 2016-12-30 16:50:29 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部