SpringMVC数据绑定四(list、set和map)

一、绑定List

1、数据绑定List（这里的Dog、User、以及UserDog实体类省略，需要查看可以看前面几篇）

使用ajax传递数据组格式list（后台使用list绑定到对象上）

前台jsp页面代码：（注意由于下面使用的Input id会与下面的冲突，所以在前一个成功后，请把前台已经完成部分注解，否则后台会输出null值）

<label>复杂类型对象list绑定</label>
<br>
<label>主人姓名1：</label> <input type="text" id="name1" name="name1">
<label>主人年龄1：</label> <input type="text" id="age1" name="age1">
<label>主人地址1：</label> <input type="text" id="address1" name="address1">  <br>
<label>狗的重量1：</label> <input type="text" id="dweight1" name="dweight1">
<label>狗的年龄1：</label> <input type="text" id="dage1"
4000
name="dage1">
<label>狗的性别1：</label> <input type="text" id="dsex1" name="dsex1">
<br>
<br>
<label>主人姓名2：</label> <input type="text" id="name2" name="name2">
<label>主人年龄2：</label> <input type="text" id="age2" name="age2">
<label>主人地址2：</label> <input type="text" id="address2" name="address2">  <br>
<label>狗的重量2：</label> <input type="text" id="dweight2" name="dweight2">
<label>狗的年龄2：</label> <input type="text" id="dage2" name="dage2">
<label>狗的性别2：</label> <input type="text" id="dsex2" name="dsex2">
<br>
<input type="button" id="subUDogList" value="提交">
<br>

js文件中代码：（注意：使用ajax的click函数都是在$(function(){})中。）

$("#subUDogList").click(function(){
$.ajax({
url:'udoglist.do',
type:'post',
contentType:"application/json",
data:JSON.stringify({userdog:[{   //第一个要点：userdog 是类UserDogForm中的list属性名称
name:$("#name1").val(),
age:$("#age1").val(),
address:$("#address1").val(),
dog:{
age:$("#dage1").val(),
weight:$("#dweight1").val(),
sex:$("#dsex1").val()
}},{
name:$("#name2").val(),
age:$("#age2").val(),
address:$("#address2").val(),
dog:{
age:$("#dage2").val(),
weight:$("#dweight2").val(),
sex:$("#dsex2").val()
}
}]}),
success:function(data){
alert("success");
},
error:function(data){
alert("error");
}
});

后台model代码：

package com.qqy.model;
import java.util.List;

public class UserDogForm {
private List<UserDog> userdog;

public List<UserDog> getUserdog() {
return userdog;
}

public void setUserdog(List<UserDog> userdog) {
this.userdog = userdog;
}

}

后台Controller代码：

@RequestMapping(value="udoglist.do")
@ResponseBody
public String uDogList(@RequestBody UserDogForm udf){ //第二个要点:需要使用@RequestBody来完成前台传输数据绑定（转为javaBean对象）
for (UserDog ud: udf.getUserdog() ){
System.out.println(ud.getAddress()+" "+ud.getName()+" "+ud.getAge()+" ["+ud.getDog().getWeight()+" "+ud.getDog().getAge()+" "+ud.getDog().getSex()+"]");
}
return "y";
}

这里前端是使用JSON.stringfy()从一个对象中解析出字符串，js中在ajax数组部分使用[{对象1},{对象2}.{对象3}…..]把数组对象转为一个类似json字符串传给后台，而后台并没有直接使用list,而是借助一个对象类（UserDogForm）来使用list。

2、使用ajax来传递json字符串(后台使用string字符串接收，然后转为list)

前端jsp页面代码：

<label>list自定义简单数据类型绑定Dog</label>
<br>
<label>体重1：</label><input type="text" id="dweight1" name="weight1">
<label>年龄1：</label><input type="text" id="dage1" name="age1">
<label>性别1：</label><input type="text" id="dsex1" name="sex1">
<br>
<label>体重2：</label><input type="text" id="dweight2" name="weight2">
<label>年龄2：</label><input type="text" id="dage2" name="age2">
<label>性别2：</label><input type="text" id="dsex2" name="sex2">
<br>
<input type="button" id="subDogList" value="提交">
<br>

js文件中代码：

$("#subDogList").click(function(){
var data1={
weight:$("#dweight2").val(),
age:$("#dage2").val(),
sex:$("#dsex2").val()
};
var data2={
weight:$("#dweight1").val(),
age:$("#dage1").val(),
sex:$("#dsex1").val()
};
var dogs=[];
dogs.push(data1);
dogs.push(data2);
$.ajax({
url:'doglistl.do',
contentType:'application/json',
type:'post',
data:JSON.stringify(dogs) ,  //后台接收就是json格式字符串，所以就直接使参数名与后台                        //Controller参数名一致完成绑定
success:function(yy){
alert("success"+"--"+yy);
},
error:function(){
alert("error");
}
});
});

后台controller代码：

@RequestMapping(value="doglistl.do")
@ResponseBody
public String dogList(@RequestBody String dogs) throws JsonParseException, JsonMappingException, IOException {
ObjectMapper mapper =new ObjectMapper();
List<Dog> doglist=mapper.readValue(dogs,mapper.getTypeFactory().constructParametricType(ArrayList.class, Dog.class));
for(Dog d:doglist)
System.out.println(d.getWeight()+" "+d.getAge()+" "+d.getSex());

return "YY";
}

这里往后台传递json字符串是用类似数组格式转化与几乎前面一致，只是这里在转化字符串并没有像数组（ss:array）而是直接把数组（dogs）转为字符串，不同的地方在于后台是使用字符串接收，然后再解析为对应的list对象。这里使用ObjectMapper类及其相关函数进行反转解析。

3、使用ajax来传递json字符串(后台使用list接收)

前面说了两种方法，或许都没有满足你的需要，下面开始直接主题：

同样的前端jsp页面代码：

 <label>list自定义简单数据类型绑定Dog</label>
<br>
<label>体重1：</label><input type="text" id="dweight1" name="weight1">
<label>年龄1：</label><input type="text" id="dage1" name="age1">
<label>性别1：</label><input type="text" id="dsex1" name="sex1">
<br>
<label>体重2：</label><input type="text" id="dweight2" name="weight2">
<label>年龄2：</label><input type="text" id="dage2" name="age2">
<label>性别2：</label><input type="text" id="dsex2" name="sex2">
<br>
<input type="button" id="subDogList" value="提交">
<br>

几乎同样的js代码（url不一样）：(jsp页面文本域id不能冲突 否则不能获取数据)

$("#subDogList").click(function(){
var data1={
weight:$("#dweight2").val(),
age:$("#dage2").val(),
sex:$("#dsex2").val()
};
var data2={
weight:$("#dweight1").val(),
age:$("#dage1").val(),
sex:$("#dsex1").val()
};
var dogs=[];
dogs.push(data1);
dogs.push(data2);
$.ajax({
url:'doglistll.do',
contentType:'application/json',
type:'post',
data:JSON.stringify(dogs) ,
success:function(yy){
alert("success"+"--"+yy);
},
error:function(){
alert("error");
}
});
});

后台Controller代码：

@RequestMapping(value="doglistll.do")
@ResponseBody
public String dogListList(@RequestBody List<Dog> dogs){
System.out.println(dogs.get(0).getWeight());

return "YY";
}

看到这里是不是觉得直接使用list更直接方便，简单。毕竟多了解一些别的方法也是不错的，还有就是ajax中的datatype一定要写成json格式指明，否则会报错。

二、Set

一般不常用，Set是不允许元素存在equals情况下的相等重复元素

1、绑定在对象上的Set

前台jsp代码：

<label>数据绑定Set后台借助对象</label>
<br>
<label>第一个对象：</label>
<br>
<label>体重：</label><input type="text" id="dw1">
<label>年龄：</label><input type="text" id="da1">
<label>性别：</label><input type="text" id="ds1">
<br>
<label>第二个对象:</label>
<br>
<label>体重：</label><input type="text" id="dw2">
<label>年龄：</label><input type="text" id="da2">
<label>性别：</label><input type="text" id="ds2">
<br>
<input type="button" id="subset1" value="提交">

js文件代码：

$("#subset1").click(function(){
var dog1= {
weight:$("#dw1").val(),
age:$("#da1").val(),
sex:$("#ds1").val(),

};
var dog2={
weight:$("#dw2").val(),
age:$("#da2").val(),
sex:$("#ds2").val(),
};
var dsf=[];
dsf.push(dog1);
dsf.push(dog2);
$.ajax({
url:'subsetform.do',
contentType:"application/json",
type:'post',
data:JSON.stringify({dogSet:dsf}),  //dogSet名称一定要和绑定对象里面的属性名称一致
success:function(){
alert("success");
},
error:function(){
alert("error");
}
});
});

后台controller 代码：

@RequestMapping(value="subsetform.do")
@ResponseBody
public String subSetForm(@RequestBody DogSetForm dsf){
int i=1;
for(Dog d:dsf.getDogSet()){
System.out.println("第"+i+"个:");
System.out.println("体重："+d.getWeight()+"  年龄："+d.getAge()+"  性别:"+d.getSex());
i++;
}
System.out.println(dsf.getDogSet().size());
return "yy";
}

这个绑定在对象上的Set使用的方法与list相同，要点也一样。

2、Set后台使用字符串接收，并转化为Set

省略，格式可以模仿list

3、后台参数直接是Set

前台jsp页面代码：

<br>
<label>数据绑定Set后台不借助对象</label>
<br>
<label>第一个对象：</label>
<br>
<label>体重：</label><input type="text" id="bdw1">
<label>年龄：</label><input type="text" id="bda1">
<label>性别：</label><input type="text" id="bds1">
<br>
<label>第二个对象:</label>
<br>
<label>体重：</label><input type="text" id="bdw2">
<label>年龄：</label><input type="text" id="bda2">
<label>性别：</label><input type="text" id="bds2">
<br>
<input type="button" id="subset" value="提交">

js文件中代码：

$("#subset").click(function(){
$.ajax({
url:'subset.do',
contentType:"application/json",
type:'post',
data:JSON.stringify([
{
weight:$("#bdw1").val(),
age:$("#bda1").val(),
sex:$("#bds1").val(),

},
{
weight:$("#bdw2").val(),
age:$("#bda2").val(),
sex:$("#bds2").val(),
}
]
),
success:function(){
alert("success");
},
error:function(){
alert("error");
}
});
});

后台Controller代码：

@RequestMapping(value="subset.do")
@ResponseBody
public String subSet(@RequestBody Set<Dog> dg){
int i=1;
for(Dog d:dg){
System.out.println("第"+i+"个:");
System.out.println("体重："+d.getWeight()+"  年龄："+d.getAge()+"  性别:"+d.getSex());
i++;
}
System.out.println(dg.size());
return "yy";
}

形式与list大同小异

三、Map

1、数据绑定Map （ map绑定在对象上）

前端jsp页面代码：

<label>数据绑定Map借助map绑定在对象上</label>
<br>
<label>第一个对象：</label>
<br>
<label>体重：</label><input type="text" id="mfdw1">
<label>年龄：</label><input type="text" id="mfda1">
<label>性别：</label><input type="text" id="mfds1">
<br>
<label>第二个对象:</label>
<br>
<label>体重：</label><input type="text" id="mfdw2">
<label>年龄：</label><input type="text" id="mfda2">
<label>性别：</label><input type="text" id="mfds2">
<br>
<input type="button" id="submapform" value="提交">
<br>

js文件代码：

$("#submapform").click(function(){
var dog1={weight:$("#mfdw1").val(),age:$("#mfda1").val(),sex:$("#mfds1").val()};
var dog2={weight:$("#mfdw2").val(),age:$("#mfda2").val(),sex:$("#mfds2").val()};
$.ajax({
url:'submapform.do',
contentType:"application/json",
type:'post',
data:JSON.stringify({dogmap:{'d1':dog1,'d2':dog2}}), //dogmap 为DogMapFrom对象属性
success:function(){
alert("success");
},
error:function(){
alert("error");
}
});
});

后台model代码：

package com.qqy.model;

import java.util.HashMap;
import java.util.Map;

public class DogMapForm {
private Map<String,Dog> dogmap =new HashMap<String,Dog>();

public Map<String, Dog> getDogmap() {
return dogmap;
}

public void setDogmap(Map<String, Dog> dogmap) {
this.dogmap = dogmap;
}

}

后台controller代码：

@RequestMapping(value="submapform.do")
@ResponseBody
public String subMapForm(@RequestBody DogMapForm dmf){
System.out.println(dmf.getDogmap().get("d1"));
System.out.println(dmf.getDogmap().get("d2"));
return "yy";
}

2、数据绑定map 参数为map类型

前台jsp页面代码：

<label>数据绑定Map 后台参数为map</label>
<br>
<label>第一个对象：</label>
<br>
<label>体重：</label><input type="text" id="mdw1">
<label>年龄：</label><input type="text" id="mda1">
<label>性别：</label><input type="text" id="mds1">
<br>
<label>第二个对象:</label>
<br>
<label>体重：</label><input type="text" id="mdw2">
<label>年龄：</label><input type="text" id="mda2">
<label>性别：</label><input type="text" id="mds2">
<br>
<input type="button" id="submap" value="提交">
<br>

js文件代码：

$("#submap").click(function(){
var dog1={weight:$("#mdw1").val(),age:$("#mda1").val(),sex:$("#mds1").val()};
var dog2={weight:$("#mdw2").val(),age:$("#mda2").val(),sex:$("#mds2").val()};
$.ajax({
url:"submap.do",
contentType:'application/json',
type:'post',
data:JSON.stringify({"d1":dog1,"d2":dog2}),
success:function(){
alert("success");
},
error:function(){
alert("error");
}

});
});

后台Controller代码：

@RequestMapping(value="submap.do")
@ResponseBody
public String subMap(@RequestBody Map<String,Dog> dogmap){
System.out.println(dogmap.get("d1").toString());
System.out.println(dogmap.get("d2").toString());
return "yy";
}