一個表單同時提交多條記錄

風靈使發表於2018-05-11

問題背景：
我要在一個表單裡同時一次性提交多名乘客的個人資訊到SpringMVC，前端HTML和SpringMVC Controller裡該如何處理？

第1種方法：表單提交，以欄位陣列接收；
第2種方法：表單提交，以BeanListModel接收；
第3種方法：將Json物件序列化成Json字串提交，以List接收；
第4種方法：將表單物件序列化成Json字串提交，以List接收；

第4種方法其實是第3種方法的升級，就是將表單轉成Json物件，再轉成Json字串提交；
然而，第4種方法還不支援含有多選控制元件表單的提交，故應該還有第5種加強版的方法。
以上4種方法都共用同一個User實體類，程式碼如下：

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程式碼如下：

    <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程式碼如下：

    @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程式碼如下：

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

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方法：

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

第3種方法：將Json物件序列化成Json字串提交，以List接收
HTML程式碼：

<head>
    <title>submitUserList_3</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script language="JavaScript" src="/js/jquery.min.js" ></script>
    <script language="JavaScript" src="/js/jquery.json.min.js" ></script>
    <script type="text/javascript" language="JavaScript">
        function submitUserList_3() {alert("ok");
            var customerArray = new Array();
            customerArray.push({id: "1", name: "李四", pwd: "123"});
            customerArray.push({id: "2", name: "張三", pwd: "332"});
            $.ajax({
                url: "/user/submitUserList_3",
                type: "POST",
                contentType : 'application/json;charset=utf-8', //設定請求頭資訊
                dataType:"json",
                //data: JSON.stringify(customerArray),    //將Json物件序列化成Json字串，JSON.stringify()原生態方法
                data: $.toJSON(customerArray),            //將Json物件序列化成Json字串，toJSON()需要引用jquery.json.min.js
                success: function(data){
                    alert(data);
                },
                error: function(res){
                    alert(res.responseText);
                }
            });
        }
    </script>
</head>

<body>
    <h1>submitUserList_3</h1>
    <input id="submit" type="button" value="Submit" onclick="submitUserList_3();">
</body>

Java程式碼：

    @RequestMapping(value = "/submitUserList_3", method ={RequestMethod.POST})
    @ResponseBody
    public String submitUserList_3(@RequestBody List<User> users)
            throws Exception{
        String result = "";
        if(users == null || users.size() <= 0){ return "No any ID.中文"; }
        result = this.showUserList(users);
        return result;
    }

第4種方法：將表單物件序列化成Json字串提交，以List接收
HTML程式碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>submitUserList_4</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script language="JavaScript" src="/js/jquery.min.js" ></script>
    <script type="text/javascript" language="JavaScript">
        //將表單序列化成json格式的資料(但不適用於含有控制元件的表單，例如核取方塊、多選的select)
        (function($){
            $.fn.serializeJson = function(){
                var jsonData1 = {};
                var serializeArray = this.serializeArray();
                // 先轉換成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}這種形式
                $(serializeArray).each(function () {
                    if (jsonData1[this.name]) {
                        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程式碼：

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

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

PbootCMS使用者提交表單和調取表單記錄
2024-08-16
boot
如何優雅的提交一個表單
2024-05-20
一次性插入多條記錄
2020-11-18
postgresql 多條記錄合併一條，或取最新的一條資料
2024-04-26
SQL
提交表單
2018-09-16
頁面提交引數多而非form表單提交時應該怎麼處理引數進行提交
2020-09-24
ORM
MySQL 關聯表取最新一條記錄方案
2020-05-12
MySql
pbootcms提交留言、提交自定義表單時取消驗證碼
2024-09-06
boot
記錄PHP post提交表單匯入mysql中文亂碼的問題
2021-03-06
PHPMySql
python 同時迭代多個序列
2020-12-22
Python
jquery ajax方式直接提交整個表單
2021-09-09
jQuery
mybatis一對多查詢resultMap只返回了一條記錄
2021-11-27
MyBatis
記錄個簡單的進度條同步顯示方法
2024-04-24
一句話得到中間值的多條記錄
2020-06-15
video.js 一個頁面同時播放多個視訊
2018-11-27
IDEJS
DBeaver同時執行多條insert into報錯處理
2024-11-19
form表單提交方式
2018-10-02
ORM
adb 可以多個視窗同時連線一個裝置嗎？
2020-05-31
mysql刪除一條記錄
2020-04-04
MySql
mysql left join的時候又表是多條記錄的話，會出現冗餘的情況
2024-04-03
MySql
如何一臺機器同時使用多個git祕鑰
2021-05-25
Git
Oracle如何刪除表中重複記錄保留第一條
2021-01-14
Oracle
Android：一個專案提交多個module到JCenter
2018-12-15
Android
利用js編寫一個簡單的html表單驗證，驗證通過時提交資料(附原始碼)
2019-01-12
JSHTML原始碼
如何一條Mediainfo --Inform語句同時獲取視訊引數和音訊引數多個Parameters
2018-11-13
AIORM音訊
js表單檔案提交
2024-04-02
JS
Ajax 提交表單資料
2021-03-03
一個簡單快速的OCR表單識別錄入工具
2019-10-16
excel將一個工作表根據條件拆分成多個工作簿
2018-12-03
Excel
同一欄位多個查詢條件時遇到的一個問題
2019-11-29
C# ling to sql 取多條記錄最大時間的例項程式碼
2019-10-10
C#SQL
程式碼同時提交到 github 和 gitee
2021-08-08
GithubGitee
Windows環境同時啟動多個Tomcat
2024-09-05
WindowsTomcat
golang 利用 WaitGroup 控制多個 goroutine 同時完成
2018-08-30
GolangAI
iview 表單提交資料的時候驗證問題
2018-07-12
View
單執行緒的JS如何實現多個互動同時進行
2022-01-09
執行緒JS
Laravel 多條件查詢時粗心導致的一個 BUG
2019-05-30
Laravel
java 表單避免重複提交？
2024-08-05
Java

一個表單同時提交多條記錄

相關文章