快捷導(dǎo)航

基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對(duì)象的處理（允許對(duì)象中包含對(duì)象）

更新時(shí)間：2015年12月28日 09:45:12 作者：chua1989

這篇文章主要介紹了基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對(duì)象的處理（允許對(duì)象中包含對(duì)象）的相關(guān)資料,需要的朋友可以參考下

表單序列化類型的數(shù)據(jù)是指url傳遞的數(shù)據(jù)的格式，形如"key=value&key=value&key=value"這樣的key/value的鍵值對(duì)。一般來(lái)說(shuō)使用jQuery的$.fn.serialize函數(shù)能達(dá)到這樣的效果。如何將這樣的格式轉(zhuǎn)化為對(duì)象？

　　我們知道使用jQuery的$.fn.serializeArray函數(shù)得到的是一個(gè)如下結(jié)構(gòu)的對(duì)象

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

　　這是一個(gè)對(duì)象數(shù)組，但有時(shí)候我們希望得到的是如下結(jié)構(gòu)的對(duì)象

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

　　所以這里需要一個(gè)轉(zhuǎn)化函數(shù)。

處理步驟如下：

　　1.使用"&"分隔將每一個(gè)鍵值對(duì)分開(kāi)然后循環(huán)處理每一個(gè)鍵值對(duì)

  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //處理每一個(gè)鍵值對(duì)
    evalThem(properties[i]);
  };

　　2.從"="符號(hào)切分指定的鍵值對(duì)，并對(duì)每個(gè)鍵和值使用decodeURIComponent解析uri 組件編碼（因?yàn)閡rl傳遞的序列化數(shù)據(jù)一般都是經(jīng)過(guò)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.如果值包含"="符號(hào)，需要額外處理（值合并）。

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

　　這里面有一個(gè)處理，就是值沒(méi)有的時(shí)候就不會(huì)往最終對(duì)象里面添加。這個(gè)可以根據(jù)自己的情況選擇刪除這段代碼與否

   if(!attributeValue){
      return ;
    }

　　4.如果鍵是“obj.obj.obj”這種由"."符號(hào)鏈接的，需要將它作為對(duì)象包含對(duì)象來(lái)處理。處理的方法是將鍵通過(guò)"."分解，然后去查看臨時(shí)對(duì)象obj中是否已經(jīng)包含分解出來(lái)的對(duì)象，如果是則將數(shù)據(jù)附加到已有的對(duì)象上。源碼如下

 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();

　　這里面我們看到網(wǎng)上有對(duì)賦值部分是這么處理的

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

　　這個(gè)很有問(wèn)題，一個(gè)是不能正確處理4中對(duì)象包含對(duì)象的問(wèn)題（尤其是有兩個(gè)元素?fù)碛型粋€(gè)父對(duì)象的時(shí)候，比如"test.id=1&test.name='chua'"都擁有父對(duì)象test）。另外一個(gè)就是值attributeValue中包含單引號(hào)、雙引號(hào)時(shí)無(wú)法正確處理。所以使用賦值"="最保險(xiǎn)。

　　所以最終完整的源碼如下

/*
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();
    //如果值中包含"="符號(hào)，需要合并值
    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中包含單引號(hào)、雙引號(hào)時(shí)無(wú)法處理的問(wèn)題
    curObj[attriNames[i]] = attributeValue.trim();
  };
  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //處理每一個(gè)鍵值對(duì)
    evalThem(properties[i]);
  };
  return obj;
}

以上內(nèi)容是基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對(duì)象的處理（允許對(duì)象中包含對(duì)象），希望本文分享能夠給大家?guī)?lái)幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)的鏈表數(shù)據(jù)結(jié)構(gòu)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鏈表數(shù)據(jù)結(jié)構(gòu)實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-04-04
基于JavaScript實(shí)現(xiàn)無(wú)限加載瀑布流
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)無(wú)限加載瀑布流，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
CocosCreator Typescript制作俄羅斯方塊游戲
目前關(guān)于cocos開(kāi)發(fā)俄羅斯方塊的文章幾乎寥寥無(wú)幾，因此本文將主要介紹如何通過(guò)CocosCreator Typescript制作簡(jiǎn)單的俄羅斯方塊游戲，代碼具有一定價(jià)值，感興趣的同學(xué)可以學(xué)習(xí)一下
2021-11-11
分享網(wǎng)頁(yè)檢測(cè)搖一搖實(shí)例代碼
這篇文章主要介紹了分享網(wǎng)頁(yè)檢測(cè)搖一搖實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-01-01
bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
Openlayers繪制地圖標(biāo)注
這篇文章主要為大家詳細(xì)介紹了Openlayers繪制地圖標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
這篇文章主要介紹了javascript實(shí)現(xiàn)淡藍(lán)色的鼠標(biāo)拖動(dòng)選擇框,可實(shí)現(xiàn)鼠標(biāo)拖動(dòng)出現(xiàn)淡藍(lán)色選擇框的效果,涉及javascript鼠標(biāo)事件及樣式的操作技巧,需要的朋友可以參考下
2015-05-05