用JSON实现form传值添加

Html：

下拉，单选，多选↓。
<form action="/vue/Insert" method="post" >
	<fieldset style="width:400px">
		<legend>个人信息</legend>
		姓名：<input type="text" name="name"  v-model="user.name" /> <br />
		性别: <input type="radio" name="sex" value="男" v-model="user.sex" />男
			 <input type="radio" value="女" name="sex" v-model="user.sex" />女 <br />
		爱好： <input type="checkbox" name="box" value="足球" v-model="a" />足球
			  <input type="checkbox" name="box" value="蓝球" v-model="a" />蓝球
			  <input type="checkbox" name="box" value="飞球" v-model="a" />飞球<br />
		班级：<select name="ban"  v-model="user.claid" >
				<option v-for="arr in sites" :value="arr.cid">{{arr.claname}}</option>
			  </select>  <br /> 
		手机号：<input type="number" name="sjh" id="sjh" v-model="user.sjh" /> <span id="err"></span> <br />
		介绍：<textarea name="tt" v-model="user.tt"></textarea><br />
		地址：
		<div class="outer" v-model="user.dz">
			<select name="province" id="province">
				<option value="请选择">请选择</option>
			</select>
			<select name="city" id="city">
				<option value="请选择">请选择</option>
			</select>
			<select name="town" id="town">
				<option value="请选择">请选择</option>
			</select>
		</div>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="../area.js"></script>
		<script src="../select.js"></script>
		<input type="submit" id="submit" /> 
	</fieldset>
	<input type="button" v-on:click="jj()" value="点击" />
</form>

Vue+Jq

<script>
	//定义
	var vm=new Vue({
		//选择操作区间
		el:"#box",
		//定义值
		data:{
			//选好班级
			sites:[],
			//储存表单值
			user:{},
			//储存多选value
			a:[]
		},
		//页面加载完成时执行代码
		mounted(){
			this.cla();
		},
		//函数，方法
		methods:{
			//班级下拉
			cla:function(){				
				$.post("/vue/chabj",{},function(data){
					var len=data.length;
					for(var i=0;i<len;i++){
						vm.sites.push(data[i]);
					}
				})
			},
			//json添加方法  
			jj:function(){
				//把多选值由数组转为String 空格隔开
				this.user.hh=this.a.join(" ");
				//把user数组 转成JSON
				var mm=JSON.stringify(this.user);
				alert(mm);
				//调用控制器，传递JSON  
				$.post("/vue/tianjia",{mm:mm},function(data){
					//成功跳转
					if(data==1){
						window.location.href="/vue/Ins";
					}
				})
			},
			
		}
		
	})
</script>

控制器

@RequestMapping("tianjia")
	@ResponseBody
	public JSONObject tianjia(HttpServletRequest req) {
		//定义JSONObje 返回类型
		JSONObject js=new JSONObject();
		//接受传来的参数
		String user=req.getParameter("mm");
		System.out.println(user);
		try {
			//java转json
			JSONObject jss=JSONObject.fromObject(user);
			//json转JAVA对象
			User u=(User)JSONObject.toBean(jss,User.class);
			userService.doIns(u);
			
		} catch (Exception e) {
			// TODO: handle exception
		}
		return js;
	}
**重要代码的就是try 里面的代码**