表单转JSON

• 本代码展示了通过jQuery遍历表单控件，获得key-value拼成json串并最终转成json对象。
  

<form id='form1'>
	 框框：<input type="text" class='fc' id="hida"/><br>
	 交通：<input type="checkbox" name="vehicle" value="Bike">bike <input type="checkbox" name="vehicle" value="Car">car <br>
	 性别：<input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female<br>
	 备注：<textarea id='MyArea'>asf</textarea><br>
	 学历：<select name="edulevel" id='edu'>
			  <option value="0">小学</option>
			  <option value="1">初中</option>
		   </select><br>
	<input type='button' id='btn2' value='提交表单'/>
</form> 
<script> 
$(function(){
	//提交时拼接表单json串
	$('#btn2').click(function(){
		/*
		* 方案1：把待取值控件所有id放到一个数组 -> 循环数组取值并把key-value拼成json串 -> 转json对象
		* 方案2：通过遍历表单控件，获得key-value拼成json串 -> 转json对象。下面函数“GetWebControls”采用方案2实现。
		*/
		console.log( GetWebControls('form1'));//打印表单json格式结果
	});
	/*调用ajax
	getAjax('/Home/test', { id: 1 }, function (data) {
                if (data) {
                    alert('操作成功!');
                    return true;
                }
                else {
                    alert('操作失败!');
                    return false;
                }
     });
	*/
});

//自动获取页面控件值
function GetWebControls(formId) {
	var str=[];
	var love=[];//爱好 复选框
	$('#'+formId).find('input,select,textarea').each(function(i,v){
		//控件id没有则取name作为key
		var id=typeof($(this).attr('id'))=='undefined'?$(this).attr('name'):$(this).attr('id');
		var val=$(this).val();
		var type = $(this).attr('type');
		switch (type) {
			case "button":
			case "submit":
				break;
			case "checkbox":
				if($(this).is(':checked'))
					love[love.length] =val;
				break;
			case "radio":
				if($(this).is(':checked'))
					str[str.length] ='"'+id+'":"'+val+'"';
				break;
			default:
				str[str.length] ='"'+id+'":"'+$.trim(val)+'"';
				break;
		}
	}); 
	var checkboxPart='"vehicle":["'+love.join('","')+'"]';//返回形如：'a':['b':'呵呵','c':'呵呵']
	return JSON.parse('{'+str.concat(checkboxPart)+'}');
}
/* Ajax请求 带返回值*/
function getAjax(url, parm, callBack) {
	$.ajax({
		type: 'post',
		dataType: "text",
		url: url,
		data: parm,
		cache: false,
		async: false,
		success: function (msg) {
			callBack(msg);
		}
	});
}
</script>