2. 程式人生 > >一個表單中有多個相同的欄位,以及springmvc接收多個相同物件問題

一個表單中有多個相同的欄位,以及springmvc接收多個相同物件問題

阿新 • • 發佈：2018-11-22
                                               

問題背景： 
我要在一個表單裡同時一次性提交多名乘客的個人資訊到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. <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程式碼如下：

[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：

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

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

public UserModel(List<User> 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<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” onclick=“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種方法最實用。  
總結： 

第1、2種方法其實都有一個共同的BUG：假如提交三條記錄時，前面兩條記錄的某些欄位不填值的話，在SpringMVC裡接收不準確了。而且，每2種方法在HMTL中需要給name屬性新增[下標]，如果下標有跨度的話（比如第一組控制元件下標是0,第二組下標是2），那麼SpringMVC裡其實的是0到2三個物件的，預設下標是1的那個物件全為null值。 

第3、4種方法最實用。






           
               

                                               

問題背景： 
我要在一個表單裡同時一次性提交多名乘客的個人資訊到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 {

相關推薦

一個表單中有多個相同的欄位,以及springmvc接收多個相同物件問題

                                      &

一個表單中多個按鈕實現不同功能

每個按鈕提交實現不同的功能 在模組中有2個提交按鈕，如下： form action="" method="post"> …… <input type="submit" name="install" value="安裝"> …… <i

form表單中有多個提交或者通過按鈕來提交時的跳轉方法

<form id="myForm"> <input id="btnId" value="提交" type="button"> </form> form表單一般是通過submit提交的，按鈕無法正常提交表單資料，就需要引用js函式來提交

自己寫一個序列化form表單，表單中有複選框checkbox，單選框radio等

form表單中有複選框，單選框等var serializeform = function (formid) {    var form = document.getElementById(formid);    var arr = {};    for (var i = 0;

php接收表單中有大陣列存在時的問題

最近在做專案時，表單中提交了一個超大的陣列（陣列元素的個數超過1000），結果陣列資料總是會有丟失，最後百度了下，看到了高人的解答，原來從php5.3之後，php為了安全性，限制了表單提交欄位的數量,也就是php.ini配置檔案中max_input_vars 引數 ，預設的

表單中涉及到的日期控制元件以及日期時間控制元件遇到的坑。

日期之間的轉換遇到很多個坑，想總結一下，方便以後的檢視。 先檢視一下單子中涉及到的時間設定： 這兩個欄位分別是我要在後臺獲取的欄位，我後臺獲取完之後經過一系列的轉換，最終要把他們轉換成時間戳，最後要以字元推送到第三方！ 由於這兩個欄位是在重複表中，當獲取一個欄位的時候，這

一個form表單中，上傳和接收多個相同的name欄位引數

一般我們在同一個表單中，都會提交不同的name欄位。可是，我遇到了提交相同欄位的情況，例子如下： <form action="test_receive.php" method="post"> <div> <

在一個form表單中實現多個submit不同的action

var ctype 編號 表單 顯示 col 格式 action 否則 在button中用JS的事件綁定onclick實現，如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

表單中多個請求引數名字相同，伺服器到底獲取的是哪個請求引數的值，表單的action和get和post提交方式的關係以及提交資料的不同點

直接看程式碼和截圖吧，程式碼中有註釋，還有文字說明！表單get提交和post提交，一個很大的不同點大家都應該知道，post提交，瀏覽器位址列中不會明文顯示，而get提交，瀏覽器位址列中會明文顯示，這不是我們今天討論的重點!今天討論的重點如下:1.表單中如果有2個控制元件的na

處理一個表單有多個提交按鈕

在做到表單的提交的時候，如果是一個按鈕提交的話，對應一個action。只需要將form表單屬性method=”post” action=”action路徑”。 可是如果是多個按鈕，如何將一個表單與多個方法關聯呢？ 思路是這樣的：先不指定表單的action，讓action屬

form表單中多個button按鈕必須聲明type類型

orm 管理系 多個 分享 com 圖片 log bmi 一個 最近在做一個後臺管理系統，發現了一個小bug： 問題描述：form表單中有多個button按鈕（以下圖為例），如果第一個button不寫type屬性，那麽點擊第一個button按鈕會觸發submit事件； 解決

php一個表單有兩個提交按鈕，分別對應不同的處理頁面，

通過隱藏表單hidden的屬性值應該可以解決 <form action="test.php" name='theForm'> <input type'hidden' name='act'> <input type="submit" name="ret

提交表單中Select列表或Checkbox複選框的多個值到Struts2 Action

以提交Select列表的值為例。 1.HTML寫法： <select name="authorizedUsers" id="authorizedUsers" multiple="multiple"> <option value="1">

一個整形陣列中有正數也有負數，陣列中連續一個或多個組成子陣列，每個子陣列都有一個和，求所有子陣列中和的最大值

本文只作為學習筆記，如若侵權請告知，一定及時刪除 題目 輸入一個整型陣列，數組裡有正數也有負數。陣列中一個或者連續的多個整陣列成一個字陣列。求所有字陣列的和的最大值。要求時間複雜度為O(n)。例

ASP.NET MVC 搜索+保存搜索結果.2個按鈕共用一個表單

req request exp select ucc 結果 total cli 調用 想要實現的效果,1.搜索功能 2.搜索結果保存到text功能 前臺代碼 一個表單2個按鈕,通過JS代碼來修改form的action,來實現調用不同的後臺代碼 &l

form表單中的input有哪些類型

span 添加圖片 選擇 password blog radi -s -a 圖片 text:文本框password:密碼框radio:單選按鈕checkbox:復選框file:文件選擇域hidden:隱藏域button:按鈕reset:重置按鈕submit:表單提交按鈕im

表單中input name屬性有無[]的區別

urn get() tro this 區別 tex () efault type 1 input數組 如下一個表單： <input type="text" name="username[]" value="Jason" /> <input type="te

orcale 查找出兩個表中相同欄位的不同的值minus

1.user表 SELECT user_id FROM OA_COMPANY_USER 2.專案表中投入過的人員 SELECT DISTINCT a.USER_ID FROM OA_COMPANY_USER a, OA_PM_PERSON_INPUT b WHERE a.

一個表單，兩個提交按鈕實現不同地址提交

有時專案中有需要將同一個表單提交到不同的兩個路由地址。 此時就可以用到下面的方法： 1.form自帶屬性： <form action="{:url('Index/batch')}" method="post" class="form-horizontal

Layui同一個表單中放置兩個按鈕，提交問題

 今天做專案遇到了這個問題，看到layui社群有人問，但沒有答案，自己就想了一個辦法： 原理：用兩個按鈕，一個按鈕設定提交方式為Post，一個為Get，這樣你就可以通過控制器端不同的接受請求方式，來實現不同的業務 核心程式碼如下： 頁面上預設寫寫post請求： 第一個