基于JavaScript将表单序列化类型的数据转化成对象
表单序列化类型的数据是指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中包含单引号、双引号时无法正确处理。所以使用赋值"="最保险。
所以最终完整的源码如下
/ 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中包含单引号、双引号时无法处理的问题 curObj[attriNames[i]] = attributeValue.trim(); }; var properties = serializedParams.split("&"); for (var i = 0; i < properties.length; i++) { //处理每一个键值对 evalThem(properties[i]); }; return obj; }
以上内容是基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象),希望本文分享能够给大家带来帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程