第一種方式：(使用ajax的方式)
前端代碼：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script> <table> <thead> <th>編號</th> <th>姓名</th> <th>性別</th> <th>學歷</th> <th>增加</th> <th>移除</th> </thead> <tbody id="data1"> <tr> <td><input type="text" name="empId"></td> <td><input type="text" name="empName"></td> <td> <select name="empSex"> <option value="男">男</option> <option value="女">女</option> </select> </td> <td> <select name="eduEducation"> <option value="本科">本科</option> <option value="碩士">碩士</option> <option value="博士">博士</option> </select> </td> <td><input type="button" onclick="addElement(this);" value="+"></td> <td><input type="button" value="-" onclick="delElement(this)"></td> </tr> </tbody> </table> <p><input type="button" id="btn_add" value="批量添加"></p> </body> <script> //批量添加 $("#btn_add").click(function () { var data=[]; //循環tbody里面所有的tr，並取出每行相對的值,填充到數組中 $("#data1 tr").each(function (index,obj) { data.push({ empId:$("input[name='empId']",obj).val(), empName:$("input[name='empName']",obj).val(), empSexual:$("select[name='empSexual'] option:selected",obj).val(), eduEducation:$("select[name='eduEducation'] option:selected",obj).val() }) }) //發起post請求 $.post({ url:"", contentType:"application/json", data:JSON.stringify(data),//將對象轉為字符 success:function (text) { alert(text.msg); } }); }) //復制tr節點的內容 function addElement(x){ $(x).parents("tr").clone().appendTo($("#data1")); } //移除tr節點 function delElement(x){ $(x).parents("tr").remove(); } </script> </html>
后端代碼：
//訪問test頁面 @RequestMapping(path="/c",method = RequestMethod.GET) public String test1(){ return "test1"; } //接收test頁面的字符數組 @RequestMapping(path = "/c",method = RequestMethod.POST,produces = "application/json;charset=utf-8") @ResponseBody public String Receive(@RequestBody List<Employee> list){ //Employee可以改為Object for (Employee employee : list) { System.out.println(employee); } return "{\"msg\":\"添加成功\"}"; }
實體類
package com.oukele.model; import java.math.BigDecimal; public class Employee { private String empId; private String empName; private String empSexual; private String eduEducation; public String getEmpId() { return empId; } public void setEmpId(String empId) { this.empId = empId == null ? null : empId.trim(); } public String getEmpName() { return empName; } public void setEmpName(String empName) { this.empName = empName == null ? null : empName.trim(); } public String getEmpSexual() { return empSexual; } public void setEmpSexual(String empSexual) { this.empSexual = empSexual == null ? null : empSexual.trim(); } public String getEduEducation() { return eduEducation; } public void setEduEducation(String eduEducation) { this.eduEducation = eduEducation == null ? null : eduEducation.trim(); } @Override public String toString() { return "Employee{" + "empId='" + empId + '\'' + ", empName='" + empName + '\'' + ", empSexual='" + empSexual + '\'' + ", eduEducation='" + eduEducation + '\'' + '}'; } }
演示：
后台接收后打印的值：
第二種方式：(使用form表單)
創建一個實體類 將Employee封裝起來
FormBean
package com.oukele.model; import java.util.List; public class FormBean { private List<Employee> employeeList; public List<Employee> getEmployeeList() { return employeeList; } public void setEmployeeList(List<Employee> employeeList) { this.employeeList = employeeList; } }
前端代碼：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script> <form action="/zhoumo/c" method="post" id="myform"> <table> <thead> <th>編號</th> <th>姓名</th> <th>性別</th> <th>學歷</th> <th>增加</th> <th>移除</th> </thead> <tbody id="data1"> <tr> <td><input type="text" name="empId"></td> <td><input type="text" name="empName"></td> <td> <select name="empSexual"> <option value="男">男</option> <option value="女">女</option> </select> </td> <td> <select name="eduEducation"> <option value="本科">本科</option> <option value="碩士">碩士</option> <option value="博士">博士</option> </select> </td> <td><input type="button" onclick="addElement(this);" value="+"></td> <td><input type="button" value="-" onclick="delElement(this)"></td> </tr> </tbody> </table> </form> <p><input type="button" id="btn_add" value="批量添加"></p> </body> <script> $("#btn_add").click(function () { //獲取行 var rows = $("#data1 tr"); //循環每一行 $(rows).each(function (index,obj) { //將每一行中的 input[type='text'],select的對象取出,再進行一次循環 $("input[type='text'],select",obj).each(function (i,o) { //當前對象 添加 name 屬性值 name =employeeList[索引].對應的屬性值 $(o).attr("name","employeeList["+index+"]."+$(o).attr("name")); }) }); //提交 $("#myform").submit(); }) //復制tr節點的內容 function addElement(x){ $(x).parents("tr").clone().appendTo($("#data1")); } //移除tr節點 function delElement(x){ $(x).parents("tr").remove(); } </script> </html>
后台代碼：
//訪問test頁面 @RequestMapping(path="/c",method = RequestMethod.GET) public String test1(){ return "test1"; }//接收test頁面的form傳遞過來的值 @RequestMapping(path = "/c",method = RequestMethod.POST) public String Receive1(FormBean formBean){ for (Employee employee : formBean.getEmployeeList()) { System.out.println(employee); } //重定向 return "redirect:/zhoumo/c"; }
演示：
前端 form表單 提交
后端：
后台還有Map接收的方式，不過我忘了。有點尷尬了。希望路過的大佬有想法能貼出來一下，一起學習（本人菜鳥一枚）>..<