基于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将表单序列化类型的数据转化成对象的处理（允许对象中包含对象），希望本文分享能够给大家带来帮助。
相关文章
这篇文章主要介绍了js中style.display=""无效的解决方法,是js程序设计中非常常见的问题,需要的朋友可以参考下2014-10-10
为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行，开发工具和编译运行工具也能够尽可能简单（诸如text文本即可编辑，window系统自带的浏览器即可编译运行的情况），决定尝试使用javascript来做2016-01-01
js中requestAnimationFrame()解读与使用示例
requestAnimationFrame()是JavaScript中用于创建高效、流畅动画的核心方法,它与浏览器的重绘过程同步,确保每次动画更新都与显示器刷新率同步,下面就来一起了解一下2024-09-09
下面小编就为大家带来一篇关于JS变量和作用域详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
今天小编就为大家分享一篇js实现前面自动补全位数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Linux下编译安装php libevent扩展实例,本文着重讲解了编译过程中一个错误解决方法,需要的朋友可以参考下2015-02-02
关于JavaScript的gzip静态压缩方法...2007-01-01
这篇文章主要介绍了JS项目中对本地存储进行二次的封装,这里我们将要使用到的key存储下来，新建一个叫constant-storage.js的文件，对外暴露一些key的键名，也方便后期统一修改，这里因为都是恒量，所以名称我们都用大写表示，需要的朋友可以参考下2022-07-07
操作元素定位元素，大家会想到使用js来实现，下面有个不错的示例，大家可以看看2014-10-10
这篇文章主要介绍了扩展JS Date对象时间格式化功能，有需要的朋友可以参考一下2013-12-12
最新评论