表單同時提交多條記錄的技術實現

需求：一個表單可以動態添加，修改以及刪除，然后提交，如下圖實例。

這里只提及兩點即可，其他的可以自己現場發揮。

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