將表單序列化類型的數據轉化成對象的處理(允許對象中包含對象)


  表單序列化類型的數據是指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;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM