从带有 Spring 控制器的 JavaScript 生成的表单提交列表 [英] Submit a List from a form generated with JavaScript with a Spring controller

问题描述

我正在使用 Spring Boot、MVC 模式和 Thymeleaf 作为模板引擎构建一个应用程序.我有一个使用 JavaScript 生成列表的表单，以及一个带有 @ModelAttribute 的控制器，期望将列表保存到数据库中.

I'm building an app with Spring Boot, the MVC pattern, and Thymeleaf as template engine. I have a form that generates a list with JavaScript, and a controller with a @ModelAttribute expecting a list, to be saved into the database.

在 JavaScript 端，我用这个数组收集项目:

At the JavaScript side I collect the items with this array:

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

function getGroupList(){
return groupList;
}

在 html 中，我试图将数组值分配给隐藏的输入字段:

In the html I'm trying to assign the array value to a hidden input field:

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

此时我的问题是，我没有找到收集数组并将其作为列表传递给控制器​​的方法.

My problem at this point, is that I don't find the way to collect the array, and pass it to the Controller as a list.

这是控制台为输入字段显示的值:

This is the value that the console shows, for the input field:

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

任何面对这个问题的建议，将不胜感激.提前致谢.

Any advice to face this issue, would be much appreciated. Thanks in advance.

推荐答案

您可以这样进行:创建模型，例如:

You can proceed like this : Create a Model, for exemple:

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

创建一个表单模型:

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 + '}';
        }   
    }

在您的控制器中(获取和发布):

in your controller (Get and Post) :

@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):用于列出所有用户:

In my view (hello.html) : for listing all users :

  <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 添加另一个用户，我将 append() 一个包含新用户的新li"元素:

Now if I want to add another user with javascript when I clic in the button 'ADD, I will append() a new 'li' element containing the new user :

<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' &'拉菲克'.您可以管理此示例(列表的索引也必须正确管理)以将所需的数据附加到您的列表中.

When I Submit, I will get a list with 2 User : 'Wassim' & 'Rafik'. You can manage this exemple (also the index of the list must managed properly) to append your list with the needed DATA.

这篇关于从带有 Spring 控制器的 JavaScript 生成的表单提交列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！