spring MVC 后端 接收 前端 批量添加的数据（简单示例）
第一种方式：(使用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接收的方式，不过我忘了。有点尴尬了。希望路过的大佬有想法能贴出来一下，一起学习（本人菜鸟一枚）>..<
