表单域与json数据间的交互

今年初在做一个包含表单，列表，分页的ajax应用的时候写了个差不多功能的函数。

/**
 * 函数jsonF$ 将表单对象所包含的控件的内容转换成json对象。
 * 参数1 为表单对象或表单对象的id；
 * 参数2 为表单对象中要略过的控件，可为“控件name属性”，“控件元素名”，控件type
 */
function jsonF$(O,skip){/* skip={'name'|['name'],'elem'|['elem'],'type'|['type']} */
	if(!O)return;
	var O=typeof(O)=='string'?$(O):O, skip=ext$({},skip), o={};
	if(typeof(O)=='object'){
		if(!O.nodeName){return O;}
		if(O.nodeName=='FORM'){
			var an=(typeof(skip.name)=='string')?skip.name.toLowerCase().split(','):isArray(skip.name)?skip.name:[],
				ae=(typeof(skip.elem)=='string')?skip.elem.toUpperCase().split(','):isArray(skip.elem)?skip.elem:[],
				at=(typeof(skip.type)=='string')?skip.type.toLowerCase().split(','):isArray(skip.type)?skip.type:[];
			for(var x=0,L=O.length;x<L;x++){
				if(!inArray(O[x].nodeName,ae)&& !O[x].disabled &&O[x].name&&O[x].name!=''&&!inArray(O[x].name.toLowerCase(),an)){
					switch(O[x].nodeName){
						case 'INPUT':
							if(!inArray(O[x].type,at)){
								switch(O[x].type){
									case 'text':
									case 'hidden':
									case 'password':
										if(/%5B%5D$|\[\]$/i.test(O[x].name)){
											var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
											if(o.hasOwnProperty(N)){
												o[N].push(O[x].value);
											}else{
												o[N]=[O[x].value];
											}
										}else{
											o[O[x].name]=O[x].value;
										}
									break;
									case 'radio':
									case 'checkbox':
										if(O[x].checked){
											if(/%5B%5D$|\[\]$/i.test(O[x].name)){
												var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
												if(o.hasOwnProperty(N))
													o[N].push(O[x].value);
												else
													o[N]=[O[x].value];
											}
											else
												o[O[x].name]=O[x].value;
										}
									break;
								}
							}
						break;
						case 'TEXTAREA':
							if(/%5B%5D$|\[\]$/i.test(O[x].name))
								o[O[x].name.replace(/%5B%5D$|\[\]$/i,'')]=[O[x].value];
							else
								o[O[x].name]=O[x].value;
						break;
						case 'SELECT':
							for(var z=0,J=O[x].length;z<J;z++){
								var Oz=O[x].options[z];
								if(Oz.selected){
									if(/%5B%5D$|\[\]$/i.test(O[x].name)){
										var N=O[x].name.replace(/%5B%5D$|\[\]$/i,'');
										if(o.hasOwnProperty(N))
											o[N].push(Oz.value);
										else
											o[N]=[Oz.value];
									}
									else
										o[O[x].name]=Oz.value;
								}
							}
						break;
					}
				}
			}
		}
	}
return o;
}

 中间有用到其他的函数。偶某些个人编写代码的习惯不是每个人都能够习惯的。

json对象设置表单的：

/**
 * iselect$ 选定 值为v 的选择下拉菜单o 的下拉项。
 */
function iselect$(o,v){
	if(o && o.nodeName=="SELECT" && !o.disabled){
		o.selectedIndex=-1;
		if(o.type=="select-one"){
			for(var z=0,L=o.length;z<L;z++){
				if(o.options[z].value==v)
					return o.selectedIndex=z;
			}
		}
		else if(o.type=="select-multiple"){
			if(!isArray(v))return false;
			for(var z=0,L=o.length;z<L;z++){
				if(inArray(o.options[z].value,v))
					o.options[z].selected=true;
			}
		}
	}
}
function icheck$(o,v){
	if(o.length){
		for(var z=0,L=o.length;z<L;z++){
			if(o[z] && o[z].nodeName=="INPUT" && !o[z].disabled){
				switch(o[z].type){
					case 'radio':
						if(o[z].value==v)return o[z].checked=true;
					break;
					case 'checkbox':
						if(!isArray(v))return false;
						if(inArray(o[z].value,v))
							o[z].checked=true;
						else
							o[z].checked=false;
					break;
				}
			}
		}
	}
	else{
		if(o&&o.nodeName=="INPUT"&&(o.type=="radio"||o.type=="checkbox") && !o.disabled){
			if(o.value==v)return o.checked=true;
			else return o.checked=o.defaultChecked;
		}
	}
}

/**
 * 将json对象的属性及其值设置表单
 */
function setform$(o,f,skip){
	var f=typeof(f)=='string'?$(f):(typeof(f)=="object"&&f)?f:me.forms[0], skip=ext$({},skip);
	if(!f||f.nodeName!=="FORM")return;
	if(o&&typeof o=="object"){
		var an=(typeof(skip.name)=='string')?skip.name.toLowerCase().split(','):isArray(skip.name)?skip.name:[],
			ae=(typeof(skip.elem)=='string')?skip.elem.toUpperCase().split(','):isArray(skip.elem)?skip.elem:[],
			at=(typeof(skip.type)=='string')?skip.type.toLowerCase().split(','):isArray(skip.type)?skip.type:[];
		for(var z in o){
			if(!inArray(z,an)&&(f.elements[z]||(isArray(o[z])&&f.elements[z+'[]']))){
				var el=f.elements[z]?f.elements[z]:isArray(o[z])?f.elements[z+'[]']:null;
				if(!el.length&&!el.disabled&&!inArray(el.nodeName,ae)){
					switch(el.nodeName){
						case 'INPUT':
							if(!inArray(el.type,at)){
								switch(el.type){
									case 'text':
									case 'hidden':
									case 'password':
										el.value=o[z];
									break;
									case 'radio':
									case 'checkbox':
										icheck$(el,o[z]);
									break;
								}
							}
						break;
						case 'TEXTAREA':
							el.innerHTML=o[z];
						break;
					}
				}
				else if(el.length&&!inArray(el.nodeName,ae)){
					if(el.nodeName=='SELECT'&&!el.disabled)iselect$(el,o[z]);
					else if(el[0].nodeName=='INPUT'){
						if(!inArray(el.type,at)){
							switch(el[0].type){
								case 'text':
								case 'hidden':
								case 'password':
									for(var x=0,J=el.length;x<J;x++){
										if(!el[x].disabled)
											el[x].value=o[z][x]?o[z][x]:'';
									}
								break;
								case 'radio':
								case 'checkbox':
									icheck$(el,o[z]);
								break;
							}
						}
					}
				}
			}
		}
	}
}

form对象转换为json数据格式的对象的应用偶是觉得这样在ajax取的send出数据之前可以比较容易扩展form的内容，把原本不在表单里的数据一起加入到转换后的对象里。

如用下面的函数来扩展或修改json对象。

function ext$(o,O){
	if('object'!=typeof(o)||'object'!=typeof(O)||!o||!O)return o;
	for(var z in O){
		o[z]=O[z];
	}
return o;
}