需求:一個表單可以動態添加,修改以及刪除,然後提交,如下圖實例。
這裏只提及兩點即可,其他的可以自己現場發揮。
- 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})
@ResponseBody
public 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;
}