而在处理复杂的表单时，需要一个一个区手动判断处理字段值，显得非常麻烦。接下来介绍的插件将解决这个问题。
关于serializejson使用jquery.serializejson，可以在基于jquery或者zepto的页面中，调用 .serializejson() 方法来序列化form表单的数据成js对象。
使用只需要在jquery或者zepto时候引入即可
<script type="text/javascript" src="jquery.js?1.1.10"></script> <script type="text/javascript" src="jquery.serializejson.js?1.1.10"></script>
示例
html form（支持input、textarea、select等标签）
<form id="my-profile"> <!-- simple attribute --> <input type="text" name="fullname" value="mario izquierdo" /> <!-- nested attributes --> <input type="text" name="address[city]" value="san francisco" /> <input type="text" name="address[state][name]" value="california" /> <input type="text" name="address[state][abbr]" value="ca" /> <!-- array --> <input type="text" name="jobbies[]" value="code" /> <input type="text" name="jobbies[]" value="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="0" /> <input type="checkbox" name="projects[0][popular]" value="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="0" /> <input type="checkbox" name="projects[1][popular]" value="1"/> <!-- select --> <select name="selectone"> <option value="paper">paper</option> <option value="rock" selected>rock</option> <option value="scissors">scissors</option> </select> <!-- select multiple options, just name it as an array[] --> <select multiple name="selectmultiple[]"> <option value="red" selected>red</option> <option value="blue" selected>blue</option> <option value="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?1.1.10, language: javascript, popular: 0 } }, selectone: rock, selectmultiple: [red, blue] }
serializejson方法返回一个js对象，并非json字符串。可以使用 json.stringify 转换成字符串（注意ie8兼容性）。
javascript权威指南(第6版)(中文版)
var jsonstring = json.stringify(obj);
指定数据类型获取到的属性值一般是字符串，可以通过html指定类型 : type 进行强制转换。
<form> <input type="text" name="notype" value="default type is :string"/> <input type="text" name="string:string" value=":string type overrides parsing options"/> <input type="text" name="excluded:skip" value="use :skip to not include this field in the result"/> <input type="text" name="number[1]:number" value="1"/> <input type="text" name="number[1.1]:number" value="1.1"/> <input type="text" name="number[other stuff]:number" value="other stuff"/> <input type="text" name="boolean[true]:boolean" value="true"/> <input type="text" name="boolean[false]:boolean" value="false"/> <input type="text" name="boolean[0]:boolean" value="0"/> <input type="text" name="null[null]:null" value="null"/> <input type="text" name="null[other stuff]:null" value="other stuff"/> <input type="text" name="auto[string]:auto" value="text with stuff"/> <input type="text" name="auto[0]:auto" value="0"/> <input type="text" name="auto[1]:auto" value="1"/> <input type="text" name="auto[true]:auto" value="true"/> <input type="text" name="auto[false]:auto" value="false"/> <input type="text" name="auto[null]:auto" value="null"/> <input type="text" name="auto[list]:auto" value="[1, 2, 3]"/> <input type="text" name="array[empty]:array" value="[]"/> <input type="text" name="array[list]:array" value="[1, 2, 3]"/> <input type="text" name="object[empty]:object" value="{}"/> <input type="text" name="object[dict]:object" value='{"my": "stuff"}'/> </form>
$('form').serializejson(); // returns =>{notype: default type is :string,string: :string type overrides parsing options,// :skip type removes the field from the outputnumber: {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 nullother stuff: other stuff},auto: { // works as the parseall optionstring: text with stuff,0: 0, // <-- parsed as number1: 1, // <-- parsed as numbertrue: true, // <-- parsed as booleanfalse: false, // <-- parsed as booleannull: null, // <-- parsed as nulllist: [1, 2, 3] // <-- array and object types are not auto-parsed },array: { // {'check1': 'true', check2: 'false', check3: 'false'}
2. 添加data-unchecked-value属性
<form id="checkboxes"> <input type="checkbox" name="checked[bool]" value="true" data-unchecked-value="false" checked/> <input type="checkbox" name="checked[bin]" value="1" data-unchecked-value="0" checked/> <input type="checkbox" name="checked[cool]" value="yup" checked/> <input type="checkbox" name="unchecked[bool]" value="true" data-unchecked-value="false" /> <input type="checkbox" name="unchecked[bin]" value="1" data-unchecked-value="0" /> <input type="checkbox" name="unchecked[cool]" value="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 setfalse: false, } number: {0: 0, // numbers are parsed because parsenumbers: true1: 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, // {'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的详细内容。