表单格式化插件jquery.serializeJSON使用方法

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

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

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

使用
       只需要在jQuery或者Zepto时候引入即可，下载地址：https://download.csdn.net/download/gorch/10862488

<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>

html写法

<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>

js写法

<script>
var jsonObj=$('#my-profile').serializeJSON();
 
alert(JSON.stringify(jsonObj));
</script>

获得结果

{
    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"]
}