SpringMVC-表单序列化、@RequestBody
序列化转 json
这样使用的目的就是能够减轻代码量，可以不通过表单中的name一个一个的通过拼接来发送数据。
(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);
@RequestBoby
作用：
1.默认情况下我们发送的都是Content-Type: application/x-www-form-urlencoded，直接使用@RequestParam接收参数。
2.如果不是Content-Type:application/x-www-form-urlencoded编码的内容，例如application/json, application/xml等，要使用@RequestBody接收参数，不然会出错。
代码示例：
前端发送界面：
<%--
Created by IntelliJ IDEA.
User: Dell
Date: 2019/10/5
Time: 16:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
</head>
<body>
<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>
<input type="button" id="formbtn" value="发送form">
<script>
$(function () {
//表单序列化 转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);
$('#formbtn').click(function () {
//获取表单中的所有数据
/*var serialize = $('#myform').serialize();
console.log(serialize);*/
/*输出的数据格式为：username=%E4%BD%95%E9%BE%99&age=12&hobby=%E7%AF%AE%E7%90%83&hobby=%E4%B9%92%E4%B9%93%E7%90%83&hobby=%E8%B6%B3%E7%90%83*/
/*引入json转化序列后就可以调用下面的方法*/
var serialize = $('#myform').serializeJson();
/*console.log(serialize);*/
/*现在的输出格式为：Object { username: "何龙", age: "12", hobby: (3) […] }这正是Ajax请求时候的传参方式*/
//将参数发送给服务器
//只有使用下面这种方式才不会出错（先记住）
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/formJson",
data:JSON.stringify(serialize),
dataType:'json',
contentType:'application/json',
success:function (data) {
console.log("成功")
console.log(data);
},
error:function(){
console.log("失败")
}
});
});
});
</script>
</body>
</html>
后端的前端控制器：
package com.helong.web.controller;
import com.helong.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class MyController {
@RequestMapping("/formJson")
@ResponseBody/*将数据返回为json格式*/
public User getJson(@RequestBody User user){
System.out.println(user);
//将数据返回给前端
return user;
}
}