zoukankan      html  css  js  c++  java
  • 将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)

      表单序列化类型的数据是指url传递的数据的格式,形如"key=value&key=value&key=value"这样的key/value的键值对。一般来说使用jQuery的$.fn.serialize函数能达到这样的效果。如何将这样的格式转化为对象?

      我们知道使用jQuery的$.fn.serializeArray函数得到的是一个如下结构的对象

    [
        {
            name: "startTime"
            value: "2015-12-02 00:00:00"
        },
        {
            name: "endTime"
            value: "2015-12-25 23:59:59"
        }
    ]

      这是一个对象数组,但有时候我们希望得到的是如下结构的对象

    {
        "startTime": "2015-12-02 00:00:00"
        "endTime": "2015-12-25 23:59:59"
    }

      所以这里需要一个转化函数。

    处理步骤如下:

      1.使用"&"分隔将每一个键值对分开然后循环处理每一个键值对

        var properties = serializedParams.split("&");
        for (var i = 0; i < properties.length; i++) {
            //处理每一个键值对
            evalThem(properties[i]);
        };

      2.从"="符号切分指定的键值对,并对每个键和值使用decodeURIComponent解析uri 组件编码(因为url传递的序列化数据一般都是经过uri组件编码的)

            var strAry = new Array();
            strAry = str.split("=");
            //使用decodeURIComponent解析uri 组件编码
            for(var i = 0; i < strAry.length; i++){
                strAry[i] = decodeURIComponent(strAry[i]);
            }
            var attributeName = strAry[0];
            var attributeValue = strAry[1].trim();

      3.如果值包含"="符号,需要额外处理(值合并)。

            if(strAry.length > 2){
                for(var i = 2;i<strAry.length;i++){
                    attributeValue += "="+strAry[i].trim();
                }
            }

      这里面有一个处理,就是值没有的时候就不会往最终对象里面添加。这个可以根据自己的情况选择删除这段代码与否

            if(!attributeValue){
                return ;
            }

      4.如果键是“obj.obj.obj”这种由"."符号链接的,需要将它作为对象包含对象来处理。处理的方法是将键通过"."分解,然后去查看临时对象obj中是否已经包含分解出来的对象,如果是则将数据附加到已有的对象上。源码如下

            var attriNames = attributeName.split("."),
                curObj = obj;
            for(var i = 0; i < (attriNames.length - 1); i++){
                curObj[attriNames[i]]?"":(curObj[attriNames[i]] = {});
                curObj = curObj[attriNames[i]];
            }
            curObj[attriNames[i]] = attributeValue.trim();

      这里面我们看到网上有对赋值部分是这么处理的

    eval("obj."+attributeName+"=""+attributeValue.trim()+"";");

      这个很有问题,一个是不能正确处理4中对象包含对象的问题(尤其是有两个元素拥有同一个父对象的时候,比如"test.id=1&test.name='chua'"都拥有父对象test)。另外一个就是值attributeValue中包含单引号、双引号时无法正确处理。所以使用赋值"="最保险。而且还有一种情况:多个checkbox同一个name的时候需要使用","来分割,所以对象中可能出现{"checkbox" : "1,2,3,4"}

      所以最终完整的源码如下

    /*
    serializedParams格式为"key1=value1&key2=value2". 
    也支持'key.sonkey=value' 
     */
    function paramString2obj (serializedParams) {    
        var obj={};
        function evalThem (str) {
            var strAry = new Array();
            strAry = str.split("=");
            //使用decodeURIComponent解析uri 组件编码
            for(var i = 0; i < strAry.length; i++){
                strAry[i] = decodeURIComponent(strAry[i]);
            }
            var attributeName = strAry[0];
            var attributeValue = strAry[1].trim();
            //如果值中包含"="符号,需要合并值
            if(strAry.length > 2){
                for(var i = 2;i<strAry.length;i++){
                    attributeValue += "="+strAry[i].trim();
                }
            }
            if(!attributeValue){
                return ;
            }
            
            var attriNames = attributeName.split("."),
                curObj = obj;
            for(var i = 0; i < (attriNames.length - 1); i++){
                curObj[attriNames[i]]?"":(curObj[attriNames[i]] = {});
                curObj = curObj[attriNames[i]];
            }
            
            //使用赋值方式obj[attributeName] = attributeValue.trim();替换
            //eval("obj."+attributeName+"=""+attributeValue.trim()+"";");
            //解决值attributeValue中包含单引号、双引号时无法处理的问题
            //这里可能存在一个种情况:多个checkbox同一个name的时候需要使用","来分割 
            curObj[attriNames[i]] = curObj[attriNames[i]]? 
            (curObj[attriNames[i]] + "," + attributeValue.trim()): 
            attributeValue.trim();
        };
        
        var properties = serializedParams.split("&");
        for (var i = 0; i < properties.length; i++) {
            //处理每一个键值对
            evalThem(properties[i]);
        };
        return obj;
    }
  • 相关阅读:
    python 解释器交互模块 -- sys
    python 操作系统模块 -- OS
    python 随机数模块 -- random
    python 时间模块 -- time
    Python 面向对象
    python 模块
    python -- 面向对象进阶
    github连接提示
    linux day4
    git基本使用
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/5076639.html
Copyright © 2011-2022 走看看