html代码
<form id="myform">
user:<input type="text" name="username"><br>
age:<input type="text" name="age" ><br>
爱好:<input type="checkbox" name="hobby" value="篮球"> 篮球
<input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
<input type="checkbox" name="hobby" value="足球"> 足球
</form>
1.传统方式接收参数,这里利用序列化时key-value的形式并且中间用&符号隔开
$('#formbtn').click(function () {
var serialize = $("#myform").serialize();
console.log(serialize);
$.post("/jsonTest",serialize,function (data) {
console.log(data);
})
});
2.jquery表单序列化转json对象插件
(function($){
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};
})(jQuery);
3.利用插件序列化表单
运行时当表单接受复杂类型的数组参数时提交失败,原因如下,在请求头中这种请求头的方式不支持复杂类型的传输
修改ajax请求代码如下,这里将json数据转换成了json字符串,在后台接收时使用requestBody接收
$.ajax({
type:"post",
url:"/jsonTest",
data:JSON.stringify(serialize),
contentType:"application/json;charset=UTF-8",
success:function (data) {
alert(data);
}
});
后台代码
@RequestMapping("/jsonTest")
@ResponseBody
public String jsonTest(@RequestBody User user){
System.out.println("测试json"+user);
return "result";
}
注意这里用到了json的依赖如下
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.8</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.8</version>
</dependency>