表单域与json数据间的交互

找了几个javascript的框架，都没有找到我想要的：
提供函数，把某个表单的所有域封装成json数据格式的对象，唯有自己实现一个。

包括对象中有集合属性、对象中引用其他对象属性： 

 

/**
**json对象数据设置到表单域中
*/
function jsonObjectToForm(form, jsonObject){
	for(i = 0, max = form.elements.length; i < max; i++) {
		e = form.elements[i];
		eName = e.name;
		if(eName.indexOf('.') > 0){
			dotIndex = eName.indexOf('.');
			parentName = eName.substring(0, dotIndex);
			childName = eName.substring(dotIndex+1);
			//迭代判断eName，组装成json数据结构
			eValue = iterValueFromJsonObject(jsonObject, parentName, childName);
		}else{
			eValue = jsonObject[eName];
		}
		if(eValue && eValue != "undefined" && eValue != "null"){
			switch(e.type){
				case 'checkbox': 
				case 'radio': 
					if(e.value == eValue){
						e.checked = true;
					}
					break;
				case 'hidden': 
				case 'password': 
				case 'textarea':
				case 'text': 
					e.value = eValue;
					break;
				case 'select-one':
				case 'select-multiple':
					for(j = 0; j < e.options.length; j++){
						op = e.options[j];
						//alert("eName : " + eName + "; op value : " + op.value + "; eValue : " + eValue);
						if(op.value == eValue){
							op.selected = true;
						}
					}
					break;
				case 'button': 
				case 'file': 
				case 'image': 
				case 'reset': 
				case 'submit': 
				default:  
			}
		}
	}
}

/**
* json数组读写有两种方式
* 1: a.bs[0].id
* 2: a["bs"][0]["id"]
* 把表单转换成json数据格式
*/
function formToJsonObject(form){
	var jsonObject = {};
	for(i = 0, max = form.elements.length; i < max; i++) {
		e = form.elements[i];
		em = new Array();
		if(e.type == 'select-multiple'){
			for(j = 0; j < e.options.length; j++){
				op = e.options[j];
				if(op.selected){
					em[em.length] = op.value;
				}
			}
		}
		switch(e.type){
			case 'checkbox': 
			case 'radio': 
				if (!e.checked) { break; } 
			case 'hidden': 
			case 'password': 
			case 'select-one':
			case 'select-multiple':
			case 'textarea':
			case 'text': 
				eName = e.name;
				if(e.type == 'select-multiple'){
					eValue = em;
				}else{
					eValue = e.value.replace(new RegExp('(["\\\\])', 'g'), '\\$1');
				}
				//判断是否是对象类型数据
				if(eName.indexOf('.') > 0){
					dotIndex = eName.indexOf('.');
					parentName = eName.substring(0, dotIndex);
					childName = eName.substring(dotIndex+1);
					//迭代判断eName，组装成json数据结构
					iterJsonObject(jsonObject, parentName, childName, eValue);
				}else{
					jsonObject[eName] = eValue;
				}
				break; 
			case 'button': 
			case 'file': 
			case 'image': 
			case 'reset': 
			case 'submit': 
			default:  
		}
	}
	return jsonObject;
}

/**
* 把表单元素迭代转换成json数据
*/
function iterJsonObject(jsonObject, parentName, childName, eValue){
	//pArrayIndex用于判断元素是否是数组标示
	pArrayIndex = parentName.indexOf('[');
	//判断是否集合数据，不是则只是对象属性
	if(pArrayIndex < 0){
		var child = jsonObject[parentName];
		if(!child){
			jsonObject[parentName] = {};
		}
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			iterJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
		}else{
			jsonObject[parentName][childName] = eValue;
		}
	}else{
		pArray = jsonObject[parentName.substring(0, pArrayIndex)];
		//若不存在js数组，则初始化一个数组类型
		if(!pArray){
			jsonObject[parentName.substring(0, pArrayIndex)] = new Array();
		}
		//取得集合下标，并判断对应下标是否存在js对象
		arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
		var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
		if(!c){
			jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex] = {};
		}
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			iterJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
		}else{
			jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName] = eValue;
		}
	}
}

/**
* 迭代json数据对象设置到表单域中
*/
function iterValueFromJsonObject(jsonObject, parentName, childName){
	//pArrayIndex用于判断元素是否是数组标示
	pArrayIndex = parentName.indexOf('[');
	//判断是否集合数据，不是则只是对象属性
	if(pArrayIndex < 0){
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			return iterValueFromJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
		}else{
			return jsonObject[parentName][childName]
		}
	}else{
		pArray = jsonObject[parentName.substring(0, pArrayIndex)];
		//取得集合下标，并判断对应下标是否存在js对象
		arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
		var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			return iterValueFromJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
		}else{
			return jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName]
		}
	}
}

 

 

欢迎大家讨论，最近在研究jsp页面纯净，只与js有关，但这将导致rich client

 

so bad  不知道有什么好的建议没