表单转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> 
< > 
$(function(){
	//提交时拼接表单json串
	$(\'#btn2\').click(function(){
		/*
		* 方案1：把待取值控件所有id放到一个数组 -> 循环数组取值并把key-value拼成json串 -> 转json对象
		* 方案2：通过遍历表单控件，获得key-value拼成json串 -> 转json对象。下面代码采用方案2实现。
		*/
		var str=[];
		var love=[];//爱好 复选框
		$(\'#form1\').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\':\'呵呵\']
		var obj=JSON.parse(\'{\'+str.concat(checkboxPart)+\'}\');
		console.log(obj);//打印表单json格式结果
	});
});
</ >