form表单序列化

最近在写的功能，因为接口那边接收的全部都是json格式，所以总结一下最近的学习心得和体会。

1、基本的表单序列化（不包含数组，map，对象等）

serialize()方法

表单结果：id=1&name=zhangsan&age=18

serializeAyyay()方法

表单结果：

[{'name':'id','value':'1'},{'name':'name','value':'zhangsan'},{'name':'age','value':'18'}]

2、基本表单转json（不包含数组，map，对象等）

其实就是利用1的方法，稍加整理而来，现将代码附上：

/**
 * 表单序列化成json
 * @param form
 */
function serializeToJson(form) {
    var o = {};
    var a = $("#" + form).serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return JSON.stringify(o);
};

form就是你的表单的id，当然，你也可以使用其他的选择器。

3、表单包含数组，map结构

在2的基础上，你将得到一个json字符串，但是，你的数组也被当成了一个字符串，所以，我的解决办法就是将表单得到的json转成json对象，然后将你的数组重新赋值给你的属性，最后再将json序列化。特别需要注意的是，如果你是直接写json格式的数组或者map，请注意格式，若是拼装成的，也请注意格式。demo如下：

var jsonData = JSON.parse(serializeToJson("form1"));//将你的表单序列化成对象
jsonData.context= JSON.parse($("#context").val());//将你的数组也转成json对象并重新赋值给属性（注意json格式数组的写法）
jsonData = JSON.stringify(jsonData);//将json对象重新序列化

4、表单包含对象

同样在2的基础上，只不过将你的对象新放在一个表单中，然后将两个表单序列化，并结合3的方法，即转换为json对象重新赋值的方法，将两个json对象拼成一个json对象并序列化。

以上就是加班一天想出来的解决复杂结构的表单序列化的问题。如果有人有更加简便的方法，也请分享给我，若有写的不对的地方，也请及时指正，避免误导他人。谢谢

猜你喜欢