從Spring使用Javascript生成的表單提交列表

我正在用Spring Boot，MVC模式和Thymeleaf作爲模板引擎構建一個應用程序。我有一個表單，用JavaScript生成一個列表，以及一個帶有@ModelAttribute的控制器，期望一個列表，將其保存到數據庫中。從Spring使用Javascript生成的表單提交列表

在JavaScript端我收集這個數組中的項目：

groupList = []; 
groupList.push(inputValue); 

function getGroupList(){ 
return groupList; 
}

在HTML中我想指定數組值到一個隱藏的輸入字段：

<input type="hidden" class="invisible" id="groupList" th:field="*{groupList}"/>

有了這個內聯函數：

<script th:inline="javascript" type="text/javascript"> 
     $(function() { 
      var groupListCollected = getGroupList(); 
      $("#groupList").val(groupListCollected); 
     }); 
</script>

我在這一點上的問題是，我沒有找到方法來收集將其作爲列表傳遞給Controller。

這是值的控制檯顯示，輸入字段：

<input type="hidden" class="invisible" id="groupList" name="groupList" 
     value="[object HTMLInputElement]">

任何意見，面對這個問題，將不勝感激。提前致謝。

來源

2017-07-07 Aleix Alcover

可以這樣進行：創建模型，用於爲例：

public class User { 
    private String username; 
    public User() { 
    } 
    public User(String username) { 
     this.username = username; 
    } 
    public String getUsername() { 
     return username; 
    } 
    public void setUsername(String username) { 
     this.username = username; 
    } 
}

創建FormModel：在您的控制器

public class FormUsers { 

     private List<User> listUsers; 

     public FormUsers(List<User> listUsers) { 
      this.listUsers = listUsers; 
     } 

     public FormUsers() { 
     } 

     public List<User> getListUsers() { 
      return listUsers; 
     } 

     public void setListUsers(List<User> listUsers) { 
      this.listUsers = listUsers; 
     } 

     @Override 
     public String toString() { 
      return "FormUsers{" + "listUsers=" + listUsers + '}'; 
     } 
    }

（Get和郵政）：

@RequestMapping(value = "/hello", method = RequestMethod.GET) 
    public String hello(ModelMap model) { 
     FormUsers formUsers = new FormUsers(); 
     List<User> list = new ArrayList<>(); 
     list.add(new User("Wassim")); 
     formUsers.setListUsers(list); 
     logger.debug("--> " + formUsers.toString()); 
     model.addAttribute("formUsers", formUsers); 
     return "hello"; 
    } 

    @RequestMapping(value = "/hello", method = RequestMethod.POST) 
    public String helloPost(@ModelAttribute FormUsers formUsers, ModelMap model) { 
     logger.debug("Get List of new users --> " + formUsers.toString()); 
     return "hello"; 
    }

在我看來（hello.html）：列出所有用戶：

<button id="addAction">ADD</button> 
      <form action="#" th:action="@{/hello}" th:object="${formUsers}" method="post"> 
       <ul id="myUl"> 
        <input type="text" th:field="*{listUsers[0].username}" /> 
       </ul> 
       <input type="submit" value="Submit" /> 
      </form>

現在，如果我想補充的JavaScript其他用戶，當我在按鈕CLIC包含新用戶的加入，我會追加（）的新‘禮’元素：

<script type="text/javascript"> 
       $(document).ready(function() { 
        console.log("ready!"); 
        $("#addAction").click(function() { 
         console.log("FUNCTION"); 
         $("#myUl").append('<li><input id="listUsers1.username" name="listUsers[1].username" value="Rafik" type="text"/></li>'); 
        }); 
       }); 
      </script>

當我提交，我將得到一個2用戶列表：'Wassim'&'Rafik'。你可以管理這個例子（也是列表的索引必須正確管理），以便在你的列表中添加所需的數據。

來源

2017-07-08 13:27:11

so？有用？ –

感謝您的幫助@Touzene Mohamed Wassim。最後，我用ajax解決了這個問題。我有一個按鈕來添加一個元素到列表中，這是用Javascript製作的。我添加了一個jQuery $ .post函數來保存項目，每次通過選擇該按鈕將新項目添加到列表中。 –

從Spring使用Javascript生成的表單提交列表

回答

相關問題