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

所属分类: 网络编程 / JavaScript 阅读数: 509
收藏 0 赞 0 分享
复制代码 代码如下:

$.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".&nbsp;&nbsp;
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);
更多精彩内容其他人还在看

基于jquery封装的一个js分页

基于jquery封装的一个js分页代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

关于js datetime的那点事

关于js datetime的一些使用经验分享,想要了解datetime日期操作的朋友可以参考下。
收藏 0 赞 0 分享

js 关于=+与+=日期函数使用说明(赋值运算符)

js 关于=+与+=日期函数使用说明(赋值运算符),可以看下,就是一些运算符的使用,看哪个更适合你。
收藏 0 赞 0 分享

JS 操作符整理[推荐收藏]

JS 操作符主要包括算术运算符,赋值运算符,比较(关系)运算符,逻辑运算符,串符(连接作用),条件运算符等
收藏 0 赞 0 分享

让html的text输入框只能输入数字和1个小数点(0-59之间可改)

今天有同事需要这个功能,主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题,特整理了下面的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

Jquery 获取checkbox的checked问题

这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - PropertyGrid属性表格

jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍,需要的朋友可以参考下。
收藏 0 赞 0 分享

20款效果非常棒的 jQuery 插件小结分享

这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 JavaScript 代码的方式
收藏 0 赞 0 分享

基于Jquery插件开发之图片放大镜效果(仿淘宝)

公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大,使用jquery的朋友可以参考下。
收藏 0 赞 0 分享
查看更多