整理 前端向后端传输对象（对象中包含另一个对象数组）

对象定义

用户对象定义

@Entity@Datapublic class UserTestForm {    @Id    @GeneratedValue(generator = "uuid")    @GenericGenerator(name = "uuid",strategy = "com.example.springdbtest.util.Base58UuidGenerator")    public String id ;    //用户名    public String userName;    //年龄    public String age;    //教育经历    @OneToMany(cascade = CascadeType.ALL,fetch = FetchType.LAZY)    public List<Education> education;}

教育经历对象定义

@Entity@Datapublic class Education {    @Id    @GeneratedValue(generator = "uuid")    @GenericGenerator(name = "uuid",strategy = "com.example.springdbtest.util.Base58UuidGenerator")    public String id ;    //入学时间    public String admissionDate;    //毕业院校    public String graduateFrom;    //毕业时间    public String graduateDate;}

form表单提交

前端页面代码

<form action="/addUser" method="post">    姓名：<input type="text" name="userName" value="lisa" /><br/>    年龄：<input type="text" name="age" value="12" /><br/><br/>    入学时间：<input type="text" name="education[0].admissionDate" value="2013-09-01" /><br/>    毕业院校：<input type="text" name="education[0].graduateFrom" value="北京大学" /><br/>    毕业时间：<input type="text" name="education[0].graduateDate" value="2017-06-01" /><br/><br/>    入学时间：<input type="text" name="education[1].admissionDate" value="2010-09-01" /><br/>    毕业院校：<input type="text" name="education[1].graduateFrom" value="清华大学" /><br/>    毕业时间：<input type="text" name="education[1].graduateDate" value="2013-06-01" /><br/><br/>   <input type="submit" value="提交" /></form>

后端数据代码

@PostMapping("/addUser")    @ResponseBody    public UserTestForm addUserForm(UserTestForm user){        log.info(user);        return user;    }

*注： 这里不可以用@RequestBody 注解

后端拿到的数据转为json格式

{    "id": null,    "userName": "lisa",    "age": "12",    "education": [        {            "id": null,            "admissionDate": "2013-09-01",            "graduateFrom": "北京大学",            "graduateDate": "2017-06-01"        },        {            "id": null,            "admissionDate": "2010-09-01",            "graduateFrom": "清华大学",            "graduateDate": "2013-06-01"        }    ]}

ajax提交

前端页面代码

<form>    姓名：<input type="text" name="userName" value="lisa" /><br/>    年龄：<input type="text" name="age" value="12" /><br/><br/>    入学时间：<input type="text" name="admissionDate1" id="a1" value="2013-09-01" /><br/>    毕业院校：<input type="text" name="graduateFrom1" id="a2"  value="北京大学" /><br/>    毕业时间：<input type="text" name="graduateDate1" id="a3" value="2017-06-01" /><br/><br/>    入学时间：<input type="text" name="admissionDate2" id="b1" value="2010-09-01" /><br/>    毕业院校：<input type="text" name="graduateFrom2" id="b2" value="清华大学" /><br/>    毕业时间：<input type="text" name="graduateDate2" id="b3" value="2013-06-01" /><br/><br/>    <input type="button" id="button" value="提交" /></form><script type="text/javascript">    $("#button").click(function(){        userName = $("[name='userName']").val();        age = $("[name='age']").val();        a1 = $("#a1").val();        a2 =  $("#a2").val();        a3 =  $("#a3").val();        b1 = $("#b1").val();        b2 = $("#b2").val();        b3 = $("#b3").val();        var user = {"userName":userName,"age":age,"education[0].admissionDate":a1,"education[0].graduateFrom":a2,"education[0].graduateDate":a3,"education[1].admissionDate":b1,"education[1].graduateFrom":b2,"education[1].graduateDate":b3};         console.log(user);         education = []         edu = {}         edu.admissionDate = a1;         edu.graduateFrom = a2;         edu.graduateDate = a3;         edu2 = {}         edu2.admissionDate = b1;         edu2.graduateFrom = b2;         edu2.graduateDate = b3;         education[0] = edu;         education[1] = edu2;         var user1 = {};         user1.userName  = userName;         user1.age = age;         user1.education = education;         console.log(user1);         var user2 = JSON.stringify(user1);         console.log(user2);        $.ajax({            url:"/addUser",            type:"POST",            data:user2,            contentType:"application/json",            success:function(data){                console.log(data);            }        });    })</script>

后端代码

@PostMapping("/addUser")    @ResponseBody    public UserTestForm addUserForm(@RequestBody UserTestForm user){        log.info(user);        return user;    }

*说明 ：
- 由于是Ajax提交 form表单中的命名不需要 education[1].graduateFrom 形式，甚至表单中所有name的名字都可不与后端对象对应，只要在Ajax中定义时与后端对应即可，但为了识别/操作/可读方面考虑不推荐
- 当后端不使用@RequestBody 注解时，前端ajax请求中data:user ，此时不需要指定contentType.

此时前端传到后端的是一个user对象

{    userName: "lisa",     age: "12",     education[0].admissionDate: "2013-09-01",     education[0].graduateFrom: "北京大学",     education[0].graduateDate: "2017-06-01",    education[1].admissionDate: "2010-09-01",    education[1].graduateDate: "2013-06-01",    education[1].graduateFrom: "清华大学"}

• 当后端使用 @RequestBody 注解时，前端ajax请求中的 data:user2 ,此时需指定 contentType:"applicaiton/json"

此时前端传后端的是一个json字符串

{    "userName": "lisa",    "age": "12",    "education": [        {            "admissionDate": "2013-09-01",            "graduateFrom": "北京大学",            "graduateDate": "2017-06-01"        },        {            "admissionDate": "2010-09-01",            "graduateFrom": "清华大学",            "graduateDate": "2013-06-01"        }    ]}

两种方式传到后端，后端接到的数据与form表单的效果一致。