Question

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

在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]">

任何有关此问题的建议都将不胜感激。提前谢谢。

Answer 1

您可以这样继续：创建一个模型，例如：

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

控制器中的

（获取和发布）：

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

现在，如果我想在按钮'ADD中clic时添加另一个用javascript的用户，我将追加（）一个包含新用户的新'li'元素：

<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'＆amp; “哈里”。您可以管理此示例（也必须正确管理列表的索引）以附加所需数据的列表。

使用带有Spring控制器的Javascript生成的表单提交列表

1 个答案: