前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提交。
而在处理复杂的表单时，需要一个一个区手动判断处理字段值，显得非常麻烦。接下来介绍的插件将解决这个问题。
关于serializeJSON
使用jquery.serializeJSON，可以在基于jQuery或者Zepto的页面中，调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。
使用
只需要在jQuery或者Zepto时候引入即可
<script type="text/javascript" src="https://www.jb51.net/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.serializejson.js"></script>
示例
HTML form（支持input、textarea、select等标签）
<form> <!-- simple attribute --> <input type="text" value="Mario Izquierdo" /> <!-- nested attributes --> <input type="text" value="San Francisco" /> <input type="text" value="California" /> <input type="text" value="CA" /> <!-- array --> <input type="text" value="code" /> <input type="text" value="climbing" /> <!-- textareas, checkboxes ... --> <textarea>serializeJSON</textarea> <textarea>javascript</textarea> <input type="hidden" value="0" /> <input type="checkbox" value="1" checked /> <textarea>tinytest.js</textarea> <textarea>javascript</textarea> <input type="hidden" value="0" /> <input type="checkbox" value="1"/> <!-- select --> <select> <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> <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", 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" value="default type is :string"/> <input type="text" value=":string type overrides parsing options"/> <input type="text" value="Use :skip to not include this field in the result"/> <input type="text" value="1"/> <input type="text" value="1.1"/> <input type="text" value="other stuff"/> <input type="text" value="true"/> <input type="text" value="false"/> <input type="text" value="0"/> <input type="text" value="null"/> <input type="text" value="other stuff"/> <input type="text" value="text with stuff"/> <input type="text" value="0"/> <input type="text" value="1"/> <input type="text" value="true"/> <input type="text" value="false"/> <input type="text" value="null"/> <input type="text" value="[1, 2, 3]"/> <input type="text" value="[]"/> <input type="text" value="[1, 2, 3]"/> <input type="text" value="{}"/> <input type="text" 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 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 标记。