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

时间  2020-07-11 标签 一个 表单 多个 相同 字段 以及 springmvc 接收 对象 问题
                               
               

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

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

以上4种方法都共用同一个User实体类，代码以下：html

[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

[java] view plain copy
print ?
  1. <form action="/user/submitUserList_1" method=“post”>  
  2.       ID:<input type=“text” name=“id”><br/>  
  3.       Username:<input type=“text” name=“name”><br/>  
  4.       Password:<input type=“text” name=“pwd”><br/><br/>  
  5.   
  6.       ID:<input type=“text” name=“id”><br/>  
  7.       Username:<input type=“text” name=“name”><br/>  
  8.       Password:<input type=“text” name=“pwd”><br/><br/>  
  9.       <input type=“submit” value=“submit”>  
  10.   </form>  
  <form action="/user/submitUserList_1" method=“post”>

        ID:<input type=“text” name=“id”><br/>

        Username:<input type=“text” name=“name”><br/>

        Password:<input type=“text” name=“pwd”><br/><br/>

ID:<input type=“text” name=“id”><br/>
        Username:<input type=“text” name=“name”><br/>
        Password:<input type=“text” name=“pwd”><br/><br/>
        <input type=“submit” value=“submit”>
    </form>Java代码以下：jquery

[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<User> userList = new ArrayList<User>();  
  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<User> userList = new ArrayList<User>();

        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. <form action="/user/submitUserList_2" method=“post”>  
  2.       ID:<input type=“text” name=“users[0].id”><br/>  
  3.       Username:<input type=“text” name=“users[0].name”><br/>  
  4.       Password:<input type=“text” name=“users[0].pwd”><br/><br/>  
  5.   
  6.       ID:<input type=“text” name=“users[2].id”><br/>  
  7.       Username:<input type=“text” name=“users[2].name”><br/>  
  8.       Password:<input type=“text” name=“users[2].pwd”><br/><br/>  
  9.       <input type=“submit” value=“Submit”>  
  10.   </form>  
  <form action="/user/submitUserList_2" method=“post”>

        ID:<input type=“text” name=“users[0].id”><br/>

        Username:<input type=“text” name=“users[0].name”><br/>

        Password:<input type=“text” name=“users[0].pwd”><br/><br/>

ID:<input type=“text” name=“users[2].id”><br/>
        Username:<input type=“text” name=“users[2].name”><br/>
        Password:<input type=“text” name=“users[2].pwd”><br/><br/>
        <input type=“submit” value=“Submit”>
    </form>
Java代码： 
除了刚才公用的User类，还要封装一个User的容器类UserModel：web

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

    private List<User> users;

public List<User> getUsers() {
        return users;
    }ajax

public void setUsers(List<User> users) {
        this.users = users;
    }json

public UserModel(List<User> users) {
        super();
        this.users = users;
    }数组

public UserModel() {
        super();
    }app

}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<User> 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<User> 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. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”  
  2.         “http://www.w3.org/TR/html4/loose.dtd”>  
  3. <html>  
  4. <head>  
  5.     <title>submitUserList_4</title>  
  6.     <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>  
  7.     <script language=“JavaScript” src="/js/jquery.min.js" ></script>  
  8.     <script type=“text/javascript” language=“JavaScript”>  
  9.         //将表单序列化成json格式的数据(但不适用于含有控件的表单，例如复选框、多选的select)  
  10.         (function(KaTeX parse error: Expected '}', got '&' at position 3: ){&̲nbsp;&nbsp;</sp….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;()&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;?&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;&nbsp;</sp…){
                $.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);
                }
            });
        }
    </script>
</head>

<body>
    <h1>submitUserList_4</h1>
    <form id=“form1”>
        ID:<input type=“text” name=“id”><br/>
        Username:<input type=“text” name=“name”><br/>
        Password:<input type=“text” name=“pwd”><br/><br/>

ID:<input type=“text” name=“id”><br/>
        Username:<input type=“text” name=“name”><br/>
        Password:<input type=“text” name=“pwd”><br/><br/>
        <input type=“button” value=“submit” οnclick=“submitUserList_4();”>
    </form>
</body>
</html>Java代码：

[java] view plain copy
print ?
  1. @RequestMapping(value = “/submitUserList_4”, method ={RequestMethod.POST})  
  2.   @ResponseBody  
  3.   public String submitUserList_4(@RequestBody List<User> 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<User> 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. 第1、2种方法其实都有一个共同的BUG：假如提交三条记录时，前面两条记录的某些字段不填值的话，在SpringMVC里接收不许确了。并且，每2种方法在HMTL中须要给name属性添加[下标]，若是下标有跨度的话（好比第一组控件下标是0,第二组下标是2），那么SpringMVC里其实的是0到2三个对象的，默认下标是1的那个对象全为null值。   
  3. 第3、4种方法最实用。  
总结： 
第一、2种方法其实都有一个共同的BUG：假如提交三条记录时，前面两条记录的某些字段不填值的话，在SpringMVC里接收不许确了。并且，每2种方法在HMTL中须要给name属性添加[下标]，若是下标有跨度的话（好比第一组控件下标是0,第二组下标是2），那么SpringMVC里其实的是0到2三个对象的，默认下标是1的那个对象全为null值。 
第三、4种方法最实用。
                           
联系我们 沪ICP备13005482号-10