当前位置：首页 > news >正文

表单同时提交多条记录的技术实现

news 2024/11/6 11:38:10

需求：一个表单可以动态添加，修改以及删除，然后提交，如下图实例。
在这里插入图片描述
这里只提及两点即可，其他的可以自己现场发挥。

js模板
表单把数据提交到后台如何接收

一，页面可以使用js模板来做，点击增加业务类型按钮，触发事件，然后把js模板append到一个元素容器中即可，随便选择一个好用的模板就可以。

二，如何提交到后台？
这里打一个比方，提交多个学生信息。
一个User实体类

public class User {private Integer id;private String name;private String pwd;
}

表单代码

    <form action="/user/submitUserList_1" method="post">ID:<input type="text" name="id"><br/>Username:<input type="text" name="name"><br/>Password:<input type="text" name="pwd"><br/><br/>ID:<input type="text" name="id"><br/>Username:<input type="text" name="name"><br/>Password:<input type="text" name="pwd"><br/><br/><input type="submit" value="submit"></form>

传到后台的java代码接收，以数组的方式接收，然后对数组进行遍历存数据库即可。

    @RequestMapping(value = "/submitUserList_1", method ={RequestMethod.POST})@ResponseBodypublic String submitUserList_1(HttpServletResponse response,Integer[] id, String[] name, String[] pwd)throws Exception{String result = "";if(id == null || id.length <= 0){ return "No any ID.中文"; }List<User> userList = new ArrayList<User>();for (int i = 0; i < id.length; i++ ) {User user = new User();user.setId(id[i]);user.setName(name[i]);user.setPwd(pwd[i]);userList.add(user);}result = this.showUserList(userList);return result;}