jQuery扩展 form序列化到json对象

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