浅谈jQuey表单序列化

原创博客，转载请联系作者

使用表单序列化的好处是可以帮我们精简代码，减少不必要的ID的使用。

jQuery表格中提供了两个表格序列化函数。分别是serilize()和serializearray()。

下面谈一下它们的用法。

1.serialize()

serialize()方法可以将表单内容序列化为字符串。它的用法如下所示：
假设存在下列表单：

<form>
        <select name="country">
            <option value="china">China</option>
            <option value="england">England</option>
        </select>
        <select name="sports" multiple="multiple">
            <option selected="selected" value="riding">Riding</option>
            <option value="football">Football</option>
            <option selected="selected" value="swimming">Swimming</option>
        </select>
        <br/>
        <input type="checkbox" name="fruit" value="apple" /> apple
        <input type="checkbox" name="fruit" value="orange" checked="checked" /> orange
        <input type="radio" name="sex" value="male" checked="checked" /> male
        <input type="radio" name="sex" value="female" /> female
    </form>

js代码如下：

 $(function() {
         console.log($("form").serialize());
 });

结果如下所示：

country=china&sports=riding&sports=swimming&fruit=orange&sex=male

2.serializeArray()

该方法将表单内容序列化然后返回JSON格式数据。
继续使用上面的表单，js改为如下所示：

$(function() {
         var data = $("form").serializeArray();
         console.log(JSON.stringify(data, null, 4));
});

结果如下所示：

[
    {
        "name": "country",
        "value": "china"
    },
    {
        "name": "sports",
        "value": "riding"
    },
    {
        "name": "sports",
        "value": "swimming"
    },
    {
        "name": "fruit",
        "value": "orange"
    },
    {
        "name": "sex",
        "value": "male"
    }
]

从上面的结果可以看出，返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个键值对——name参数和value参数（如果value不为空的话）。

jQuery提供的两个序列化方法都比较简单，很多时候并不能满足我们的工作需求，这时我们可以使用一个jQuery插件-jquery.serializeJSON。

3.jquery.serializeJSON

jquery.serializeJSON是一个强大的表单序列化插件，它可以将表单内容序列化为JSON格式，并支持属性和数组的嵌套。

下载地址：https://github.com/marioizquierdo/jquery.serializeJSON

3.1示例

此处引用官方示例

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：

$(function() {
        var data = $('#my-profile').serializeJSON();
        console.log(JSON.stringify(data, null, 4));
});

返回结果如下：

{
    "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返回JSON对象而不是JSON字符串。
• serializeJSON依赖于jQuery的serializeArray（）方法

3.2 设置解析方式

默认的，serializeJSON将表单中的值解析为字符串类型。可以给name属性添加限定符来设置不用的解析方式。

<form id="my-profile">
        <input type="text" name="notype" value="默认解析类型 :string" />
        <input type="text" name="string:string" value="使用：解析类型的方式进行设置" />
        <input type="text" name="excluded:skip" value="使用 :skip在结果中忽略掉这个值" />
        
        <!-- 将值解析为数字类型 -->
        <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" />

        <!-- 将值解析为null -->
        <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>

解析结果如下：

{
    "notype": "默认解析类型 :string",
    "string": "使用：解析类型的方式进行设置",
    "number": {
        "1": 1,
        "1.1": 1.1,
        "other stuff": null
    },
    "boolean": {
        "0": false,
        "true": true,
        "false": false
    },
    "null": {
        "null": null,
        "other stuff": "other stuff"
    },
    "auto": {
        "0": 0,
        "1": 1,
        "string": "text with stuff",
        "true": true,
        "false": false,
        "null": null,
        "list": "[1, 2, 3]"
    },
    "array": {
        "empty": [],
        "list": [
            1,
            2,
            3
        ]
    },
    "object": {
        "empty": {},
        "dict": {
            "my": "stuff"
        }
    }
}

解析类型也可以通过data-value-type进行设置：

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

3.3 配置

serializeJSON的默认配置如下：

• 值总是被转换成字符串
• 键(name)默认也是字符串
• 没有选择的checkboxes会被忽略掉
• 禁用的表单元素也会被忽略

可选配置参数如下：

• checkboxUncheckedValue：String，设没有选中时候的值
• parseBoolean：True，自动检测，将值转换成布尔值
• parseNumbers:True，自动检测，将值转换成数字
• parseNulls:True：自动检测，将值转换成Null
• parseAll：True：自动进行检测转换
• parseWithFunction：function：自定义转换函数
• customTypes：{}，自定义转换类型，格式：{type:function(value){...}}
• defaultTypes:{defauTypes}，覆盖默认类型
• useIntKeysAsArrayIndex:true，使用整数作为键

既可以将这些参数通过serializeJSON方法传入，也可以通过$.serializeJSON.defaultOptions.进行设置。