浅谈jQuey表单序列化

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

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

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

下面谈一下它们的用法。

1.serialize()

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

        
            China
            England
        
        
            Riding
            Football
            Swimming
        
        

         apple
         orange
         male
         female
    

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：

        
        
        
        
        
        
        
        
        
        
        serializeJSON
        javascript
        
        
        tinytest.js
        javascript
        
        
        
        
            Paper
            Rock
            Scissors
        
        
        
            Red
            Blue
            Yellow
        
    

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属性添加限定符来设置不用的解析方式。

解析结果如下：

{
    "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进行设置：

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.进行设置。