一个表单中有多个相同的字段,以及springmvc接收多个相同对象问题

                               
               

问题背景: 
我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC,前端HTML和SpringMVC Controller里该如何处理?

  • 第1种方法:表单提交,以字段数组接收;
  • 第2种方法:表单提交,以BeanListModel接收;
  • 第3种方法:将Json对象序列化成Json字符串提交,以List接收;
  • 第4种方法:将表单对象序列化成Json字符串提交,以List接收; 
    第4种方法其实是第3种方法的升级,就是将表单转成Json对象,再转成Json字符串提交; 
    然而,第4种方法还不支持含有多选控件表单的提交,故应该还有第5种加强版的方法。

以上4种方法都共用同一个User实体类,代码如下:

[java] view plain copy
print ?
  1. public class User {  
  2.   
  3.     private Integer id;  
  4.     private String name;  
  5.     private String pwd;  
  6.   
  7.     @Override  
  8.     public String toString() {  
  9.         return "User{" +  
  10.                 "id=" + id +  
  11.                 ", name='" + name + '\'' +  
  12.                 ", pwd='" + pwd + '\'' +  
  13.                 '}';  
  14.     }  
  15.     // .......后面还有getter、setter方法,省略了  
  16.  }  
public class User {

private Integer id;
    private String name;
    private String pwd;

@Override
    public String toString() {
        return “User{” +
                “id=” + id +
                “, name=’” + name + ‘’’ +
                “, pwd=’” + pwd + ‘’’ +
                ‘}’;
    }
    // …后面还有getter、setter方法,省略了
 }第1种方法:表单提交,以字段数组接收 
HTML代码如下:

[java] view plain copy
print ?
  1. "/user/submitUserList_1" method=“post”>  
  2.       ID:“text” name=“id”>
      
  3.       Username:“text” name=“name”>
      
  4.       Password:“text” name=“pwd”>

      
  5.   
  6.       ID:“text” name=“id”>
      
  7.       Username:“text” name=“name”>
      
  8.       Password:“text” name=“pwd”>

      
  9.       “submit” value=“submit”>  
  10.     
  

        ID:

        Username:

        Password:

ID:

        Username:

        Password:


       
    Java代码如下:

[java] view plain copy
print ?
  1. @RequestMapping(value = “/submitUserList_1”, method ={RequestMethod.POST})  
  2.    @ResponseBody  
  3.    public String submitUserList_1(HttpServletResponse response,Integer[] id, String[] name, String[] pwd)  
  4.                            throws Exception{  
  5.        String result = “”;  
  6.        if(id == null || id.length <= 0){ return “No any ID.中文”; }  
  7.        List userList = new ArrayList();  
  8.        for (int i = 0; i < id.length; i++ ) {  
  9.            User user = new User();  
  10.            user.setId(id[i]);  
  11.            user.setName(name[i]);  
  12.            user.setPwd(pwd[i]);  
  13.            userList.add(user);  
  14.        }  
  15.        result = this.showUserList(userList);  
  16.        return result;  
  17.    }  
 @RequestMapping(value = “/submitUserList_1”, method ={RequestMethod.POST})
    @ResponseBody
    public String submitUserList_1(HttpServletResponse response,Integer[] id, String[] name, String[] pwd)
                            throws Exception{
        String result = “”;
        if(id == null || id.length <= 0){ return “No any ID.中文”; }
        List userList = new ArrayList();
        for (int i = 0; i < id.length; i++ ) {
            User user = new User();
            user.setId(id[i]);
            user.setName(name[i]);
            user.setPwd(pwd[i]);
            userList.add(user);
        }
        result = this.showUserList(userList);
        return result;
    }
第2种方法:表单提交,以BeanListModel接收  
HTML代码如下:
[java] view plain copy
print ?
  1. "/user/submitUserList_2" method=“post”>  
  2.       ID:“text” name=“users[0].id”>
      
  3.       Username:“text” name=“users[0].name”>
      
  4.       Password:“text” name=“users[0].pwd”>

      
  5.   
  6.       ID:“text” name=“users[2].id”>
      
  7.       Username:“text” name=“users[2].name”>
      
  8.       Password:“text” name=“users[2].pwd”>

      
  9.       “submit” value=“Submit”>  
  10.     
  

        ID:

        Username:

        Password:

ID:

        Username:

        Password:


       
   
Java代码: 
除了刚才公用的User类,还要封装一个User的容器类UserModel:

[java] view plain copy
print ?
  1. public class UserModel {  
  2.     private List users;  
  3.   
  4.     public List getUsers() {  
  5.         return users;  
  6.     }  
  7.   
  8.     public void setUsers(List users) {  
  9.         this.users = users;  
  10.     }  
  11.   
  12.     public UserModel(List users) {  
  13.         super();  
  14.         this.users = users;  
  15.     }  
  16.   
  17.     public UserModel() {  
  18.         super();  
  19.     }  
  20.   
  21. }  
public class UserModel {
    private List users;

public List getUsers() {
        return users;
    }

public void setUsers(List users) {
        this.users = users;
    }

public UserModel(List users) {
        super();
        this.users = users;
    }

public UserModel() {
        super();
    }

}SpringMVC Controller方法:

[java] view plain copy
print ?
  1. @RequestMapping(value = “/submitUserList_2”, method ={RequestMethod.POST})  
  2.     @ResponseBody  
  3.     public String submitUserList_2(UserModel users)  
  4.             throws Exception{  
  5.         String result = “”;  
  6.         List userList = users.getUsers();  
  7.         if(userList == null || userList.size() <= 0){ return “No any ID.中文”; }  
  8.         result = this.showUserList(userList);  
  9.         return result;  
  10.     }  
@RequestMapping(value = “/submitUserList_2”, method ={RequestMethod.POST})
    @ResponseBody
    public String submitUserList_2(UserModel users)
            throws Exception{
        String result = “”;
        List userList = users.getUsers();
        if(userList == null || userList.size() <= 0){ return “No any ID.中文”; }
        result = this.showUserList(userList);
        return result;
    }
第4种方法:将表单对象序列化成Json字符串提交,以List接收  
HTML代码:
[java] view plain copy
print ?
  1. “-//W3C//DTD HTML 4.01 Transitional//EN”  
  2.         “http://www.w3.org/TR/html4/loose.dtd”>  
  3.   
  4.   
  5.     submitUserList_4  
  6.     “content-type” content=“text/html; charset=utf-8”>  
  7.     “JavaScript” src="/js/jquery.min.js" >  
  8.     “text/javascript” language=“JavaScript”>  
  9.         //将表单序列化成json格式的数据(但不适用于含有控件的表单,例如复选框、多选的select)  
  10.         (function(KaTeX parse error: Expected '}', got '&' at position 3: ){&̲nbsp; .fn.serializeJson = function(){  
  11.                 var jsonData1 = {};  
  12.                 var serializeArray = this.serializeArray();  
  13.                 // 先转换成{“id”: [“12”,“14”], “name”: [“aaa”,“bbb”], “pwd”:[“pwd1”,“pwd2”]}这种形式  
  14.                 KaTeX parse error: Expected 'EOF', got '&' at position 31: …).each(function&̲nbsp;() {&….isArray(jsonData1[this.name])) {  
  15.                             jsonData1[this.name].push(this.value);  
  16.                         } else {  
  17.                             jsonData1[this.name] = [jsonData1[this.name], this.value];  
  18.                         }  
  19.                     } else {  
  20.                         jsonData1[this.name] = this.value;  
  21.                     }  
  22.                 });  
  23.                 // 再转成[{“id”: “12”, “name”: “aaa”, “pwd”:“pwd1”},{“id”: “14”, “name”: “bb”, “pwd”:“pwd2”}]的形式  
  24.                 var vCount = 0;  
  25.                 // 计算json内部的数组最大长度  
  26.                 for(var item in jsonData1){  
  27.                     var tmp = KaTeX parse error: Expected 'EOF', got '&' at position 26: …sonData1[item])&̲nbsp;? jso…("#form1").serializeJson();  
  28.             //console.log(“jsonStr:\r\n” + jsonStr);  
  29.             //alert(jsonStr);  
  30.             KaTeX parse error: Expected '}', got '&' at position 8: .ajax({&̲nbsp; ){
                $.fn.serializeJson = function(){
                    var jsonData1 = {};
                    var serializeArray = this.serializeArray();
                    // 先转换成{“id”: [“12”,“14”], “name”: [“aaa”,“bbb”], “pwd”:[“pwd1”,“pwd2”]}这种形式
                    KaTeX parse error: Expected '}', got 'EOF' at end of input: …           if (.isArray(jsonData1[this.name])) {
                                jsonData1[this.name].push(this.value);
                            } else {
                                jsonData1[this.name] = [jsonData1[this.name], this.value];
                            }
                        } else {
                            jsonData1[this.name] = this.value;
                        }
                    });
                    // 再转成[{“id”: “12”, “name”: “aaa”, “pwd”:“pwd1”},{“id”: “14”, “name”: “bb”, “pwd”:“pwd2”}]的形式
                    var vCount = 0;
                    // 计算json内部的数组最大长度
                    for(var item in jsonData1){
                        var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
                        vCount = (tmp > vCount) ? tmp : vCount;
                    }

if(vCount > 1) {
                    var jsonData2 = new Array();
                    for(var i = 0; i < vCount; i++){
                        var jsonObj = {};
                        for(var item in jsonData1) {
                            jsonObj[item] = jsonData1[item][i];
                        }
                        jsonData2.push(jsonObj);
                    }
                    return JSON.stringify(jsonData2);
                }else{
                    return “[” + JSON.stringify(jsonData1) + “]”;
                }
            };
        })(jQuery);

function submitUserList_4() {alert(“ok”);
            var jsonStr = $("#form1").serializeJson();
            //console.log(“jsonStr:\r\n” + jsonStr);
            //alert(jsonStr);
            $.ajax({
                url: “/user/submitUserList_4”,
                type: “POST”,
                contentType : ‘application/json;charset=utf-8’, //设置请求头信息
                dataType:“json”,
                data: jsonStr,
                success: function(data){
                    alert(data);
                },
                error: function(res){
                    alert(res.responseText);
                }
            });
        }
   


   

submitUserList_4


   

        ID:

        Username:

        Password:

ID:

        Username:

        Password:


       
   



Java代码:

[java] view plain copy
print ?
  1. @RequestMapping(value = “/submitUserList_4”, method ={RequestMethod.POST})  
  2.   @ResponseBody  
  3.   public String submitUserList_4(@RequestBody List users)  
  4.           throws Exception{  
  5.       String result = “”;  
  6.       if(users == null || users.size() <= 0){ return “No any ID.中文”; }  
  7.       result = this.showUserList(users);  
  8.       return result;  
  9.   }  
  @RequestMapping(value = “/submitUserList_4”, method ={RequestMethod.POST})
    @ResponseBody
    public String submitUserList_4(@RequestBody List users)
            throws Exception{
        String result = “”;
        if(users == null || users.size() <= 0){ return “No any ID.中文”; }
        result = this.showUserList(users);
        return result;
    }

[java] view plain copy
print ?
  1. 总结:   
  2. 12种方法其实都有一个共同的BUG:假如提交三条记录时,前面两条记录的某些字段不填值的话,在SpringMVC里接收不准确了。而且,每2种方法在HMTL中需要给name属性添加[下标],如果下标有跨度的话(比如第一组控件下标是0,第二组下标是2),那么SpringMVC里其实的是02三个对象的,默认下标是1的那个对象全为null值。   
  3. 34种方法最实用。  
总结: 
第1、2种方法其实都有一个共同的BUG:假如提交三条记录时,前面两条记录的某些字段不填值的话,在SpringMVC里接收不准确了。而且,每2种方法在HMTL中需要给name属性添加[下标],如果下标有跨度的话(比如第一组控件下标是0,第二组下标是2),那么SpringMVC里其实的是0到2三个对象的,默认下标是1的那个对象全为null值。 
第3、4种方法最实用。






           
               

你可能感兴趣的:(一个表单中有多个相同的字段,以及springmvc接收多个相同对象问题)