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

转载:http://blog.csdn.net/u012792137/article/details/78330105

对象定义

用户对象定义

@Entity
@Data
public 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
@Data
public 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表单的效果一致。