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

来源:https://www.cnblogs.com/snake23/archive/2018/08/30/9562657.html
-Advertisement-
Play Games

問題背景： 我要在一個表單里同時一次性提交多名乘客的個人信息到SpringMVC，前端HTML和SpringMVC Controller里該如何處理？ 第1種方法：表單提交，以欄位數組接收； 第2種方法：表單提交，以BeanListModel接收； 第3種方法：將Json對象序列化成Json字元串提 ...


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

  • 第1種方法：表單提交，以欄位數組接收；
  • 第2種方法：表單提交，以BeanListModel接收；
  • 第3種方法：將Json對象序列化成Json字元串提交，以List接收；
  • 第4種方法：將表單對象序列化成Json字元串提交，以List接收； 
    第4種方法其實是第3種方法的升級，就是將表單轉成Json對象，再轉成Json字元串提交； 
    然而，第4種方法還不支持含有多選控制項表單的提交，故應該還有第5種加強版的方法。

以上4種方法都共用同一個User實體類，代碼如下：

  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. }

第1種方法：表單提交，以欄位數組接收 
HTML代碼如下：

  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>

Java代碼如下：

  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. }

第2種方法：表單提交，以BeanListModel接收 
HTML代碼如下：

  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>

Java代碼： 
除了剛纔公用的User類，還要封裝一個User的容器類UserModel：

  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. }

SpringMVC Controller方法：

  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. }

第3種方法：將Json對象序列化成Json字元串提交，以List接收 
HTML代碼：

  1. <head>
  2. <title>submitUserList_3</title>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4. <script language="JavaScript" src="/js/jquery.min.js" ></script>
  5. <script language="JavaScript" src="/js/jquery.json.min.js" ></script>
  6. <script type="text/javascript" language="JavaScript">
  7. function submitUserList_3() {alert("ok");
  8. var customerArray = new Array();
  9. customerArray.push({id: "1", name: "李四", pwd: "123"});
  10. customerArray.push({id: "2", name: "張三", pwd: "332"});
  11. $.ajax({
  12. url: "/user/submitUserList_3",
  13. type: "POST",
  14. contentType : 'application/json;charset=utf-8', //設置請求頭信息
  15. dataType:"json",
  16. //data: JSON.stringify(customerArray), //將Json對象序列化成Json字元串，JSON.stringify()原生態方法
  17. data: $.toJSON(customerArray), //將Json對象序列化成Json字元串，toJSON()需要引用jquery.json.min.js
  18. success: function(data){
  19. alert(data);
  20. },
  21. error: function(res){
  22. alert(res.responseText);
  23. }
  24. });
  25. }
  26. </script>
  27. </head>
  28.  
  29. <body>
  30. <h1>submitUserList_3</h1>
  31. <input id="submit" type="button" value="Submit" onclick="submitUserList_3();">
  32. </body>

Java代碼：

  1. @RequestMapping(value = "/submitUserList_3", method ={RequestMethod.POST})
  2. @ResponseBody
  3. public String submitUserList_3(@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. }

第4種方法：將表單對象序列化成Json字元串提交，以List接收 
HTML代碼：

  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($){
  11. $.fn.serializeJson = function(){
  12. var jsonData1 = {};
  13. var serializeArray = this.serializeArray();
  14. // 先轉換成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}這種形式
  15. $(serializeArray).each(function () {
  16. if (jsonData1[this.name]) {
  17. if ($.isArray(jsonData1[this.name])) {
  18. jsonData1[this.name].push(this.value);
  19. } else {
  20. jsonData1[
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【leetcode 簡單】 第一百四十六題 最長和諧子序列
    和諧數組是指一個數組裡元素的最大值和最小值之間的差別正好是1。 現在，給定一個整數數組，你需要在所有可能的子序列中找到最長的和諧子序列的長度。 示例 1: 輸入: [1,3,2,2,5,2,3,7] 輸出: 5 原因: 最長的和諧數組是：[3,2,2,2,3]. 說明: 輸入的數組長度最大不超過20 ...
  • java面試題
    一、java基礎：1、抽象類與介面的區別：2、set集合和map集合在除去重覆時，分別調用的是哪種方法？結果是否相同？3、把D:\\java文件夾中內容複製到E:\\中4、sleep()和wait()的區別5、線程的關閉方式有幾種二、web基礎1、servlet為什麼被設計成單例多線程。2、jsp的 ...
  • Visual Basic 6.0（VB6.0）詳細安裝過程
    註：大家如果沒有VB6.0的安裝文件，可自行百度一下下載，一般文件大小在200M左右的均為完整版的軟體，可以使用。 特別提示：安裝此軟體的時候最好退出360殺毒軟體（包括360安全衛士，電腦管家等，如果電腦上有這些軟體的話），因為現如今的360殺毒軟體直接會對VB6.0軟體誤報，這樣的話就可能會在安 ...
  • 華為筆試——C++平安果dp演算法
    題目：平安果 題目介紹：給出一個m*n的格子，每個格子里有一定數量的平安果，現在要求從左上角頂點（1,1）出發，每次走一格並拿走那一格的所有平安果，且只能向下或向右前進，最終到達右下角頂點（m，n），要求求出能拿走的平安果的最大數值。 輸入：第一行有兩個數值m，n，然後是m行n列數值。 輸出：一個數 ...
  • SpringMVC體系下各組件的功能邊界及重構建議
    最近在重構後端代碼，很多同學對Spring體系下的後端組件如Controller、Service、Repository、Component等認識不夠清晰，導致代碼里常常會出現Controller里直接使用RestTemplate、直接訪問資料庫的情況。下麵談談我對這些組件功能邊界的認識，一家之言，歡 ...
  • MyEclipse下SpringBoot+JSP整合過程及踩坑
    剛開始學習SpringBoot，記錄一下舊項目整合到SpringBoot時遇到的問題（後續踩的坑也會持續加入） PS：通過查看他人博客自己東拼西湊出來的，不一定完全正確，請謹慎對待 1：打包為jar或war後發現jsp文件無法訪問或404等： 可能原因1：controller控制類不在啟動類所在的目 ...
  • Java基礎知識精華部分
    寫代碼： 1，明確需求。我要做什麼？ 2，分析思路。我要怎麼做？1,2,3。 3，確定步驟。每一個思路部分用到哪些語句，方法，和對象。 4，代碼實現。用具體的java語言代碼把思路體現出來。 學習新技術的四點： 1，該技術是什麼？ 2，該技術有什麼特點(使用註意)： 3，該技術怎麼使用。demo 4 ...
  • 【luogu題解】P1546 最短網路 Agri-Net
    題目 約翰已經給他的農場安排了一條高速的網路線路，他想把這條線路共用給其他農場。為了用最小的消費，他想鋪設最短的光纖去連接所有的農場。 你將得到一份各農場之間連接費用的列表，你必須找出能連接所有農場並所用光纖最短的方案。每兩個農場間的距離不會超過100000。 輸入 第一行： 農場的個數，N（3<= ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類