基于jQuery的一个扩展form序列化到json对象


Posted in Javascript onDecember 09, 2010
$.fn.serializeObject = function() { 
var o = {}; 
var a = this.serializeArray(); 
$.each(a, function() { 
if (o[this.name]) { 
if (!o[this.name].push) { 
o[this.name] = [ o[this.name] ]; 
} 
o[this.name].push(this.value || ''); 
} else { 
o[this.name] = this.value || ''; 
} 
}); 
return o; 
}

这个function对于普通的对象转换是足够的,但是如果出现对象内部又包含子对象的情形就不能支持了。
例如我有这样的一个form表单:
<form id="testform"> 
<input type="text" name="name" value="dummyName" id="name"> 
<input type="text" name="category.id" value="categoryId" id="name"> 
<input type="text" name="category.name" value="categoryName" id="name"> 
</form>

对应到server端上的domain class是这样的:
public class DummyProduct { private DummyCategory category; 
private String name; 
public DummyCategory getCategory() { 
return category; 
} 
public void setCategory(DummyCategory category) { 
this.category = category; 
} 
public String getName() { 
return name; 
} 
public void setName(String name) { 
this.name = name; 
} 
} 
public class DummyCategory { 
private String id; 
private String name; 
public String getId() { 
return id; 
} 
public void setId(String id) { 
this.id = id; 
} 
public String getName() { 
return name; 
} 
public void setName(String name) { 
this.name = name; 
} 
}

如果想把表单数据序列化成跟server端domain class匹配的json字符串,就可以使用我下面的这个扩展
/** @serializedParams looks like "prop1=value1&prop2=value2".   
Nested property like 'prop.subprop=value' is also supported **/ 
function paramString2obj (serializedParams) { var obj={}; 
function evalThem (str) { 
var attributeName = str.split("=")[0]; 
var attributeValue = str.split("=")[1]; 
if(!attributeValue){ 
return ; 
} 
var array = attributeName.split("."); 
for (var i = 1; i < array.length; i++) { 
var tmpArray = Array(); 
tmpArray.push("obj"); 
for (var j = 0; j < i; j++) { 
tmpArray.push(array[j]); 
}; 
var evalString = tmpArray.join("."); 
// alert(evalString); 
if(!eval(evalString)){ 
eval(evalString+"={};"); 
} 
}; 
eval("obj."+attributeName+"='"+attributeValue+"';"); 
}; 
var properties = serializedParams.split("&"); 
for (var i = 0; i < properties.length; i++) { 
evalThem(properties[i]); 
}; 
return obj; 
} 
$.fn.form2json = function(){ 
var serializedParams = this.serialize(); 
var obj = paramString2obj(serializedParams); 
return JSON.stringify(obj); 
}

使用起来大概像这个样子:
var json = $("#testform").form2json(); 
alert(json);
Javascript 相关文章推荐
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
js验证上传图片的方法
May 12 Javascript
javascript基本语法
May 31 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
薪资那么高的Web前端必看书单
Oct 13 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
来自国外的页面JavaScript文件优化
Dec 08 #Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 #Javascript
javascript中callee与caller的用法和应用场景
Dec 08 #Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 #Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 #Javascript
jquery蒙版控件实现代码
Dec 08 #Javascript
基于JQuery制作的产品广告效果
Dec 08 #Javascript
You might like
咖啡的传说和历史
2021/03/03 新手入门
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
How TDD works
2012/09/30 面试题
会计自我鉴定范文
2013/10/06 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
新党员入党决心书
2015/09/22 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
golang elasticsearch Client的使用详解
2021/05/05 Golang