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

 更新时间:2010年12月09日 13:27:45   作者:  
jQuery没有直接支持form到json的序列化方法,目前网上有一个实现是这样的
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

复制代码 代码如下:

$.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性能优化的38个建议

    jQuery性能优化的38个建议

    想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQuery代码的原则,不单单会告诉你如何去书写,也会告诉你为什么这样书写,希望大家会觉得有所帮助
    2014-03-03
  • JQueryMiniUI按照时间进行查询的实现方法

    JQueryMiniUI按照时间进行查询的实现方法

    下面小编就为大家带来一篇JQueryMiniUI按照时间进行查询的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 超级酷和最实用的jQuery实例收集(20个)

    超级酷和最实用的jQuery实例收集(20个)

    二十个超级酷和最实用的jQuery实例,对于使用和学习jquery的朋友是个不错的参考与学习资料。
    2010-04-04
  • jQuery移动端图片上传组件

    jQuery移动端图片上传组件

    这篇文章主要介绍了jQuery移动端图片上传组件,使用File API+canvas 客户端压缩图片,并实现文件上传服务端,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery 删除/替换DOM元素的几种方式

    jQuery 删除/替换DOM元素的几种方式

    在结果集后链式调用remove()方法即可删除也可以通过向remove传参的形式来过滤选择结果再执行remove操作
    2014-05-05
  • jquery中done和then的区别(详解)

    jquery中done和then的区别(详解)

    下面小编就为大家分享一篇jquery中done和then的区别(详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解

    jQuery中通过ajax调用webservice传递数组参数的问题实例详解

    本文通过实例给大家详细介绍jQuery中通过ajax调用webservice传递数组参数的相关资料,需要的朋友可以参考下
    2016-05-05
  • jQuery中验证表单提交方式及序列化表单内容的实现

    jQuery中验证表单提交方式及序列化表单内容的实现

    之前项目中使用的表单提交方式,使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中,下面有个不错的示例大家可以参考下
    2014-01-01
  • 基于LayUI分页和LayUI laypage分页的使用示例

    基于LayUI分页和LayUI laypage分页的使用示例

    本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 浅谈jquery上下滑动的注意事项

    浅谈jquery上下滑动的注意事项

    下面小编就为大家带来一篇jquery上下滑动的注意事项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论

?


http://www.vxiaotou.com