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

代码如下:

$.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);

赞 (0)

相关推荐

  • Jquery 组合form元素为json格式,asp.net反序列化

    作者:敖士伟 Email:ikmb@163.com 转载注明作者 说明: 1.js根据表单元素class属性,把表单元素的name和value组合为json格式;用表单元素class属性可以针对性地组合JSON数据. 2.后端ASP.NET用JavaScriptSerializer反序列化为对象实列. 3.好处:简化了前端数据读取与后端数据赋值. 复制代码 代码如下: function GetJSONStr(class_name) { var a = []; //文本框 $("." +

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jQuery form插件的使用之处理server返回的JSON， XML，HTML数据

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--处理server返回的JSON, XML,HTML数据</title> <meta http-equiv="Content-Type" cont

  • 关于jquery form表单序列化的注意事项详解

    关于jquery form表单序列化的注意事项详解

    本文主要给大家介绍的是关于jquery form表单序列化的一些注意事项,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 我们先来讲讲表单中 中readonly和disabled的区别: readonly只对input和textarea有效, 但是disabled对于所以的表单元素都是有效的,包括radio,checkbox等 如果表单中使用的disabled那么用户是不能选择的,也就是说这个文本框是无法获取到焦点的,而readonly是可以获取到焦点,只是不能修改,为只读 最重要

  • jQuery-serialize()输出序列化form表单值的方法

    实例 输出序列化表单值的结果: 复制代码 代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语

  • jquery form表单序列化为对象的示例代码

    复制代码 代码如下: $.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.nam

  • jQuery实现的form转json经典示例

    jQuery实现的form转json经典示例

    本文实例讲述了jQuery实现的form转json功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • jquery自动将form表单封装成json的具体实现

    前端页面: 复制代码 代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

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

    复制代码 代码如下: $.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.nam

  • jQuery实现form表单序列化转换为json对象功能示例

    jQuery实现form表单序列化转换为json对象功能示例

    本文实例讲述了jQuery实现form表单序列化转换为json对象功能.分享给大家供大家参考,具体如下: 做web前端开发时,需要ajax提交大量表单数据,如果一个个form字段拼接很费劲也容易出错,下面方法可解决这个问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery form序列化转换为json对象</title> <

  • 基于jQuery实现一个marquee无缝滚动的插件

    基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee ). 代码如下: /** * 类库名称:jQuery.marquee * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件 * 作者主页:http://www.miaoqiyuan.cn/ * 联系邮箱:mqycn@126.com * 使用说明:http://www.mia

  • 基于jquery的一个图片hover的插件

    先来看看使用方法. 演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htmHTML文件中这样写: 复制代码 代码如下: <div class="jcutter"> <img src="1.jpg" alt=""> <div class="jcutter-content"> 这是点开后的页面的内容 </div> </div&g

  • 基于jquery的一个浮动框(扩展性比较好 )

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv=&q

  • formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)

    formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)

    原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上. 其中也用了json数据格式, 之前想对插件中所需的功能,从零开始写,但是觉得太冗余,没必要.就基于另外2个plugin现实. 分别是:jquery.json 和 jStorage. 这两个插件本身实用小巧, api简单易用, 其中jStorage在老一点的浏览器(不支持原生JSON操作)中需要用到jquery.json或者json2 formSt

  • 基于jquery实现一个滚动的分步注册向导-附源码

    基于jquery实现一个滚动的分步注册向导-附源码

    先给大家展示效果图,需要的朋友可以下载源码哦- 查看演示        下载源码 HTML 首先要载入jquery库和滚动插件scrollable.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script&

  • 基于JQuery的一个简单的鼠标跟随提示效果

    基于JQuery的一个简单的鼠标跟随提示效果

    1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

  • 基于jquery的一个简单的脚本验证插件

    主要用到了jquery,以及自定义的一个属性wl_check,属性说明如下: 1.语法 [need:true,type:int,maxlen:15,minlen:2] 2.关键字 need:文本输入框的必填限制 regtype:文本输入框的正则表达式类别验证 minlen:文本输入框的最小输入长度 maxlen:文本输入框的最大输入长度 minval:数字型文本输入框的最值 maxval:数字型文本输入框的最值 notval:下拉框的必选设置 minselect:单复选框的最少选项数 maxse

  • 基于jquery 的一个progressbar widge

    此项目的demo网站http://wijmo.com/Wijmo-Open/samples/ 复制代码 代码如下: /* * wijprogressbar Widget. V1.0 * * Copyright (c) Componentone Inc. * * Depends: * Jquery-1.4.2.js * jquery.ui.core.js * jquery.ui.widget.js * *Optional dependence for effect settings: * jque

随机推荐