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

2017-11-16 19:20:03来源:CSDN作者:qq_26564827人点击

分享

一、绑定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" 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")  @ResponseBodypublic String subMap(@RequestBody Map<String,Dog> dogmap){    System.out.println(dogmap.get("d1").toString());    System.out.println(dogmap.get("d2").toString());    return "yy";}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台