表单格式化插件jquery.serializeJSON

首页 > 代码库 > 表单格式化插件jquery.serializeJSON

表单格式化插件jquery.serializeJSON

2024-10-10 04:51:39 218人阅读

前言

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

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

关于serializeJSON

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

使用

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

<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script><script type="text/javascript" src="http://www.mamicode.com/jquery.serializejson.js"></script>

示例

HTML form（支持input、textarea、select等标签）

<form id="my-profile">    <!-- simple attribute -->    <input type="text" name="fullName"              value="http://www.mamicode.com/Mario Izquierdo" />     <!-- nested attributes -->    <input type="text" name="address[city]"         value="http://www.mamicode.com/San Francisco" />    <input type="text" name="address[state][name]"  value="http://www.mamicode.com/California" />    <input type="text" name="address[state][abbr]"  value="http://www.mamicode.com/CA" />     <!-- array -->    <input type="text" name="jobbies[]"             value="http://www.mamicode.com/code" />    <input type="text" name="jobbies[]"             value="http://www.mamicode.com/climbing" />     <!-- textareas, checkboxes ... -->    <textarea              name="projects[0][name]">serializeJSON</textarea>    <textarea              name="projects[0][language]">javascript</textarea>    <input type="hidden"   name="projects[0][popular]" value="http://www.mamicode.com/0" />    <input type="checkbox" name="projects[0][popular]" value="http://www.mamicode.com/1" checked />     <textarea              name="projects[1][name]">tinytest.js</textarea>    <textarea              name="projects[1][language]">javascript</textarea>    <input type="hidden"   name="projects[1][popular]" value="http://www.mamicode.com/0" />    <input type="checkbox" name="projects[1][popular]" value="http://www.mamicode.com/1"/>     <!-- select -->    <select name="selectOne">        <option value="http://www.mamicode.com/paper">Paper</option>        <option value="http://www.mamicode.com/rock" selected>Rock</option>        <option value="http://www.mamicode.com/scissors">Scissors</option>    </select>     <!-- select multiple options, just name it as an array[] -->    <select multiple name="selectMultiple[]">        <option value="http://www.mamicode.com/red"  selected>Red</option>        <option value="http://www.mamicode.com/blue" selected>Blue</option>        <option value="http://www.mamicode.com/yellow">Yellow</option>    </select></form>

javascript：

$(‘#my-profile‘).serializeJSON(); // returns =>{    fullName: "Mario Izquierdo",     address: {    city: "San Francisco",    state: {        name: "California",        abbr: "CA"        }    },     jobbies: ["code", "climbing"],     projects: {        ‘0‘: { name: "serializeJSON", language: "javascript", popular: "1" },        ‘1‘: { name: "tinytest.js",   language: "javascript", popular: "0" }    },     selectOne: "rock",    selectMultiple: ["red", "blue"]}

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

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

var jsonString = JSON.stringify(obj);

指定数据类型

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

<form>    <input type="text" name="notype"           value="http://www.mamicode.com/default type is :string"/>    <input type="text" name="string:string"    value="http://www.mamicode.com/:string type overrides parsing options"/>    <input type="text" name="excluded:skip"    value="http://www.mamicode.com/Use :skip to not include this field in the result"/>     <input type="text" name="number[1]:number"           value="http://www.mamicode.com/1"/>    <input type="text" name="number[1.1]:number"         value="http://www.mamicode.com/1.1"/>    <input type="text" name="number[other stuff]:number" value="http://www.mamicode.com/other stuff"/>     <input type="text" name="boolean[true]:boolean"      value="http://www.mamicode.com/true"/>    <input type="text" name="boolean[false]:boolean"     value="http://www.mamicode.com/false"/>    <input type="text" name="boolean[0]:boolean"         value="http://www.mamicode.com/0"/>     <input type="text" name="null[null]:null"            value="http://www.mamicode.com/null"/>    <input type="text" name="null[other stuff]:null"     value="http://www.mamicode.com/other stuff"/>     <input type="text" name="auto[string]:auto"          value="http://www.mamicode.com/text with stuff"/>    <input type="text" name="auto[0]:auto"               value="http://www.mamicode.com/0"/>    <input type="text" name="auto[1]:auto"               value="http://www.mamicode.com/1"/>    <input type="text" name="auto[true]:auto"            value="http://www.mamicode.com/true"/>    <input type="text" name="auto[false]:auto"           value="http://www.mamicode.com/false"/>    <input type="text" name="auto[null]:auto"            value="http://www.mamicode.com/null"/>    <input type="text" name="auto[list]:auto"            value="http://www.mamicode.com/[1, 2, 3]"/>     <input type="text" name="array[empty]:array"         value="http://www.mamicode.com/[]"/>    <input type="text" name="array[list]:array"          value="http://www.mamicode.com/[1, 2, 3]"/>     <input type="text" name="object[empty]:object"       value="http://www.mamicode.com/{}"/>    <input type="text" name="object[dict]:object"        value=http://www.mamicode.com/‘{"my": "stuff"}‘/></form>

$(‘form‘).serializeJSON(); // returns =>{    "notype": "default type is :string",    "string": ":string type overrides parsing options",    // :skip type removes the field from the output    "number": {        "1": 1,        "1.1": 1.1,        "other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number)    },    "boolean": {        "true": true,        "false": false,        "0": false, // <-- "false", "null", "undefined", "", "0" parse as false    },    "null": {        "null": null, // <-- "false", "null", "undefined", "", "0" parse as null        "other stuff": "other stuff"    },    "auto": { // works as the parseAll option        "string": "text with stuff",        "0": 0,         // <-- parsed as number        "1": 1,         // <-- parsed as number        "true": true,   // <-- parsed as boolean        "false": false, // <-- parsed as boolean        "null": null,   // <-- parsed as null        "list": "[1, 2, 3]" // <-- array and object types are not auto-parsed    },    "array": { // <-- works using JSON.parse        "empty": [],        "not empty": [1,2,3]    },    "object": { // <-- works using JSON.parse        "empty": {},        "not empty": {"my": "stuff"}    }}

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

<form>  <input type="text" name="number[1]"     data-value-type="number"  value="http://www.mamicode.com/1"/>  <input type="text" name="number[1.1]"   data-value-type="number"  value="http://www.mamicode.com/1.1"/>  <input type="text" name="boolean[true]" data-value-type="boolean" value="http://www.mamicode.com/true"/>  <input type="text" name="null[null]"    data-value-type="null"    value="http://www.mamicode.com/null"/>  <input type="text" name="auto[string]"  data-value-type="auto"    value="http://www.mamicode.com/0"/></form>

options配置

默认配置

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

自定义配置

写法                                 释义checkboxUncheckedValue: string      针对未勾选的checkboxes，设定值parseBooleans: true                 自动检测转换”true”、”false”为布尔值true、falseparseNumbers: true                  自动检测转换”1″、”33.33″、”-44″为数字1、33.33、-44parseNulls: true                    自动检测字符串”null”为nullparseAll: 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 属性。

默认方法：

<form>  <input type="checkbox" name="check1" value="http://www.mamicode.com/true" checked/>  <input type="checkbox" name="check2" value="http://www.mamicode.com/true"/>  <input type="checkbox" name="check3" value="http://www.mamicode.com/true"/></form>

$(‘form‘).serializeJSON(); // returns =>{‘check1‘: ‘true‘} // Note that check2 and check3 are not included because they are not checked

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

1. 配置checkboxUncheckedValue

$(‘form‘).serializeJSON({checkboxUncheckedValue: "false"}); // returns =>{‘check1‘: ‘true‘, check2: ‘false‘, check3: ‘false‘}

2. 添加data-unchecked-value属性

<form id="checkboxes">  <input type="checkbox" name="checked[bool]"  value="http://www.mamicode.com/true" data-unchecked-value="http://www.mamicode.com/false" checked/>  <input type="checkbox" name="checked[bin]"   value="http://www.mamicode.com/1"    data-unchecked-value="http://www.mamicode.com/0"     checked/>  <input type="checkbox" name="checked[cool]"  value="http://www.mamicode.com/YUP"                               checked/>   <input type="checkbox" name="unchecked[bool]"  value="http://www.mamicode.com/true" data-unchecked-value="http://www.mamicode.com/false" />  <input type="checkbox" name="unchecked[bin]"   value="http://www.mamicode.com/1"    data-unchecked-value="http://www.mamicode.com/0" />  <input type="checkbox" name="unchecked[cool]"  value="http://www.mamicode.com/YUP" /> <!-- No unchecked value specified --></form>

$(‘form#checkboxes‘).serializeJSON(); // Note no option is used // returns =>{  ‘checked‘: {    ‘bool‘:  ‘true‘,    ‘bin‘:   ‘1‘,    ‘cool‘:  ‘YUP‘  },  ‘unchecked‘: {    ‘bool‘: ‘false‘,    ‘bin‘:  ‘0‘    // Note that unchecked cool does not appear, because it doesn‘t use data-unchecked-value  }}

自动检测转换类型

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

$(‘form‘).serializeJSON({parseNulls: true, parseNumbers: true}); // returns =>{  "bool": {    "true": "true", // booleans are still strings, because parseBooleans was not set    "false": "false",  }  "number": {    "0": 0, // numbers are parsed because parseNumbers: true    "1": 1,    "2.2": 2.2,    "-2.25": -2.25,  }  "null": null, // "null" strings are converted to null becase parseNulls: true  "string": "text is always string",  "empty": ""}

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

var emptyStringsAndZerosToNulls = function(val, inputName) {  if (val === "") return null; // parse empty strings as nulls  if (val === 0)  return null; // parse 0 as null  return val;} $(‘form‘).serializeJSON({parseWithFunction: emptyStringsAndZerosToNulls, parseNumbers: true}); // returns =>{  "bool": {    "true": "true",    "false": "false",  }  "number": {    "0": null, // <-- parsed with custom function    "1": 1,    "2.2": 2.2,    "-2.25": -2.25,  }  "null": "null",  "string": "text is always string",  "empty": null // <-- parsed with custom function}

自定义类型

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

<form>  <input type="text" name="scary:alwaysBoo" value="http://www.mamicode.com/not boo"/>  <input type="text" name="str:string"      value="http://www.mamicode.com/str"/>  <input type="text" name="number:number"   value="http://www.mamicode.com/5"/></form>

$(‘form‘).serializeJSON({  customTypes: {    alwaysBoo: function(str) { // value is always a string      return "boo";    },    string: function(str) { // all strings will now end with " override"      return str + " override";    }  }}); // returns =>{  "scary": "boo",        // <-- parsed with type :alwaysBoo  "str": "str override", // <-- parsed with new type :string (instead of the default)  "number": 5,           // <-- the default :number still works}

忽略空表单字段

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

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

使用useIntKeyAsArrayIndex配置

<form>  <input type="text" name="arr[0]" value="http://www.mamicode.com/foo"/>  <input type="text" name="arr[1]" value="http://www.mamicode.com/var"/>  <input type="text" name="arr[5]" value="http://www.mamicode.com/inn"/></form>

按照默认的方法，结果为：

$(‘form‘).serializeJSON(); // returns =>{‘arr‘: {‘0‘: ‘foo‘, ‘1‘: ‘var‘, ‘5‘: ‘inn‘ }}

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

$(‘form‘).serializeJSON({useIntKeysAsArrayIndex: true}); // returns =>{‘arr‘: [‘foo‘, ‘var‘, undefined, undefined, undefined, ‘inn‘]}

默认配置Defaults

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

$.serializeJSON.defaultOptions.parseAll = true; // parse booleans, numbers and nulls by default $(‘form‘).serializeJSON(); // No options => then use $.serializeJSON.defaultOptions // returns =>{  "bool": {    "true": true,    "false": false,  }  "number": {    "0": 0,    "1": 1,    "2.2": 2.2,    "-2.25": -2.25,  }  "null": null,  "string": "text is always string",  "empty": ""}

总结

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

表单格式化插件jquery.serializeJSON

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 表单格式化插件jquery.serializeJSON