jquery异步提交对象、数组（基本类型和对象类型）、集合数据（springMVC数据绑定参数）

一、java web项目中异步提交数据最普遍不过了，今天来说下前台异步提交数据，springMVC如何接受对象数据、数组和集合。以下内容都是实际测试，项目搭建默认已经搭建好。

主要以jquery的ajax()方法来做异步请求。

准备工作，创建java bean名称是Student类，属性包括id, name, age

二、开始异步请求

2.1普通对象提交

2.1.1 前台

var param = {id : 1, name : 'wtao', age : 18};
$.ajax({
    url : '/data',
    data : param,
    type : 'POST',
    success:function(data){
        console.log(data);
    }
});

2.1.2 后台部分 接收成功

2.2数组（基本类型）和集合（基本类型）

2.2.1前台部分，这里做个说明，param提交给后台，即使是传递的key是id，也会变成“id[]”这样的key传递，所以后台接收的参数名需要改成“id[]”；可是正经的表单submit提交给后台，即使是多个<input name="id" />控件提交给后台，传递的数组参数名就是id，一定区分出来。

var param = {id : [1,2,3], name : ['wtao', 'hexk', 'xiaoma']};
$.ajax({
    url : '/data1',
    data : param,
    type : 'POST',
    success:function(data){
        console.log(data);
    }
});

 

2.2.2 后台 按集合接收  成功

 2.2.3 按数组接收  同集合接收方式一样 注意   id[]   就可以了

2.3数组（复杂对象）和集合（复杂对象）

2.3.1前台   普遍的想法是这样的

var array = [{id : 1, name : 'wtao'}, {id : 2, name : 'xiaoming'}];
var param = {student: array};
$.ajax({
    url : '/data4',
    data : param,
    type : 'POST',
    success:function(data){
        console.log(data);
    }
});

可是向后台传递的值是这个面目全非的样子，太坑了，这样后台肯定没法接收，原因是post之前会用因为jQuery需要调用jQuery.param序列化参数，导致传递的值有问题

解决起来很容易，将数据序列化成json字符串，并添加contentType: 'application/json;charset=utf-8'属性

var param = [{id : 1, name : 'wtao'}, {id : 2, name : 'xiaoming'}];
$.ajax({
    url : '/data4',
    type : 'POST',
    data: JSON.stringify(param), // 将对象数组序列化成字符串
    contentType: 'application/json;charset=utf-8', //将已json格式向后台传递
    success:function(data){
        console.log(data);
    }
});

 改完之后的提交参数，看着就正经了，前台部分就这样了。

2.3.2数组后台部分 也需要改动，也是很容易，仅在参数的前面加上@RequestBody注解，就OK了，是不是easy。成功

2.3.2集合后台部分 同数组

至此大部分的绑定传值都完了，好研究的同学，可以想想，springMVC如何接收一个List<Strudent> student再接收一个Long id，如：public Object test（List<Student> student,  Long teacherId）的方法签名，该如何解决，相信能解决的定是大佬了，有想法的同学可以留言讨论。

（完）