html页面
注意点:ajax属于异步请求,所以我们多选框需要在ajax请求之前将值赋给成员变量,不能同时进行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//导入jq
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
爱好:
<input type="checkbox" name="vehicle" value="吃饭" class="vehicle">吃饭
<input type="checkbox" name="vehicle" value="睡觉" class="vehicle">睡觉
<input type="checkbox" name="vehicle" value="打豆豆" class="vehicle">打豆豆
<input type="checkbox" name="vehicle" value="旅游" class="vehicle">旅游
<input type="button" id="T" value="提交">
<script type="text/javascript">
$(function () {
var zz="";
//谨记Class标签为为.获取id为#号获取
$(".vehicle").on("click", function () {
var vehicle;
$("input[name='vehicle']:checked").each(function (index, value) {
vehicle += value.value+",";
});
//转存到上级作用域
zz = vehicle;
});
$("#T").on("click", function () {
//将前面undefined给切割掉获取拼接的属性值
alert(zz.substring(9));
$.ajax({
url: "/user",
data: {
zz: zz.substring(9)
}
});
});
})
</script>
</body>
</html>
java代码
@RequestMapping("/user")
private String getOne(String zz){
System.out.println("One = " + zz);
return "user";
}