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" 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";
}