使用Spring控制器从JavaScript生成的表单提交列表

我正在用Spring Boot、MVC模式和Thymeleaf作为模板引擎构建一个应用程序。我有一个用JavaScript生成列表的表单，还有一个带有

@modeldattribute

的控制器，它需要一个列表保存到数据库中

在JavaScript端，我使用以下数组收集项目：

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

function getGroupList(){
return groupList;
}

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

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

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

使用此内联函数：

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

$（函数（）{
var groupListCollected=getGroupList（）；
$（“#groupList”）.val（groupListCollected）；
});

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

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

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

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

---

任何关于这个问题的建议都将不胜感激。提前感谢。

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

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

公共类FormUsers{
私有列表用户；
公共表单用户（列表用户）{
this.listUsers=listUsers；
}
公共表单用户（）{
}
公共列表getListUsers（）{
返回列表用户；
}
public void setListUsers（列表listUsers）{
this.listUsers=listUsers；
}
@凌驾
公共字符串toString（）{
返回“FormUsers{“+”listUsers=“+listUsers+'}”；
}   
}

在控制器中（获取并发布）：

@RequestMapping（value=“/hello”，method=RequestMethod.GET）
公共字符串hello（ModelMap模型）{
FormUsers FormUsers=新FormUsers（）；
列表=新的ArrayList（）；
添加（新用户（“Wassim”）；
formUsers.setListUsers（列表）；
logger.debug（“-->”+formUsers.toString（））；
model.addAttribute（“formUsers”，formUsers）；
回复“你好”；
}
@RequestMapping（value=“/hello”，method=RequestMethod.POST）
公共字符串helloPost（@modeldattribute FormUsers FormUsers，ModelMap model）{
debug（“获取新用户列表-->”+formUsers.toString（））；
回复“你好”；
}

在我的视图中（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用户，我将在（）中添加一个新的“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>

$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
$（“#添加操作”）。单击（函数（）{
console.log（“函数”）；
$（“#myUl”）。追加（“
”）；
});
});

当我提交时，我将得到一个包含2个用户的列表：“Wassim”和“Rafik”。

---

您可以管理此示例（同时必须正确管理列表的索引），以将所需数据附加到列表中。

？它有效吗？谢谢你的帮助@Touzene Mohamed Wassim。最后，我用ajax解决了这个问题。我有一个按钮向列表中添加一个元素，它是用Javascript制作的。我添加了一个jQuery$.post函数来保存该项目，每次通过选择该按钮将新项目添加到列表中时都会使用该函数。恭喜@TouzeneMohamedWassim这种方式有效。现在我只需要管理索引xD