1. 需要留意的问题
mvc框架的处理惩罚日期问题
@ResponseBody响应工具是自界说工具，响应不是json
@ResopnseBody响应自界说工具时，日期为是long范例的数
竣事数据要领的参数，该如何界说？吸收多个工具？
2. 页面代码
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax批量新增操纵</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.4.1.js"></script> </head> <body> <form> <table > <tr> <td>姓名</td> <td>身份证</td> <td>时间</td> <td>direction</td> <td>type</td> <td>操纵</td> </tr> <tbody> <tr> <td> <!-- 荟萃为自界说实体类中的团结属性，有几个实体类，改变下标就行了。 --> <input type="text"/> </td> <td> <input type="text"/> </td> <td> <input type="date"/> </td> <td> <input type="radio" value="1"/>进入 <input type="radio" value="2"/>分开 </td> <td> <input type="radio" value="1"/> 内部 <input type="radio" value="2"/> 外部 </td> <td> <input type="button" value="移除"> </td> </tr> </tbody> <tr> <td colspan="6"> <input type="button" value="新增visitor" /> <input type="button" value="生存"/> </td> </tr> </table> </form> <script> $(function() { var index_val = 0; $("body").on('click', '.remove', function() { // 移除当前行, 通过父级来绑定... // $(this).parent().parent().remove(); $("#tbody tr").remove(); // 包围，生成行 if (index_val > 0) { var data_str = ""; for (var i = 0; i < index_val; i++) { data_str += "<tr>" + "<td>" + " <input type='text'/>" + "</td>" + "<td>" + " <input type='text'/>" + "</td>" + "<td>" + " <input type='date'/>" + "</td>" + "<td>" + " <input type='radio' value='1'/>进入" + " <input type='radio' value='2'/>分开" + "</td>" + "<td>" + " <input type='radio' value='1'/> 内部" + " <input type='radio' value='2'/> 外部" + "</td>" + "<td>" + " <input type='button' value='移除'>" + "</td>" + "</tr>"; } $("#tbody").append(data_str); } // 把下标淘汰一 就行了，就是移除了。 index_val --; console.log("remove: ", index_val); }); $("#add").click(function() { // 自增1 index_val ++; var data_str = "<tr>" + "<td>" + " <input type='text'/>" + "</td>" + "<td>" + " <input type='text'/>" + "</td>" + "<td>" + " <input type='date'/>" + "</td>" + "<td>" + " <input type='radio' value='1'/>进入" + " <input type='radio' value='2'/>分开" + "</td>" + "<td>" + " <input type='radio' value='1'/> 内部" + " <input type='radio' value='2'/> 外部" + "</td>" + "<td>" + " <input type='button' value='移除'>" + "</td>" + "</tr>"; $("#tbody").append(data_str); console.log("add==>" + index_val); }); $("#save").click(function() { var form_data = $("#myForm").serialize(); // console.log(form_data) $.ajax({ url: "visitor/batchAdd", type: "post", data: form_data, success: function(data) { console.log(data); }, error: function(e) { console.log(e); } }); }); }); </script> </body> </html>
js学得terrible… 可以或许移除，我的移除是先移除所有的行，从头生成行，较量之前生成的行，少一行。
3. controller界说参数吸收
批量新增实体类BatchVisitor ，界说荟萃吸收多个工具
package cn.bitqian.entity; import java.util.ArrayList; import java.util.List; /** * 批量新增 visitorInfo * @author echo lovely * */ public class BatchVisitor { private List<VisitorInfo> visitorList = new ArrayList<>(); public List<VisitorInfo> getVisitorList() { return visitorList; } public void setVisitorList(List<VisitorInfo> visitorList) { this.visitorList = visitorList; } public BatchVisitor() {} }
controller要领，放实体类，实体类内里套VisitorInfo的荟萃
@RequestMapping(value="/batchAdd", method=RequestMethod.POST) @ResponseBody public VisitorInfo batchAddVisitor(BatchVisitor batchVisitor) { List<VisitorInfo> visitorList = batchVisitor.getVisitorList(); // System.out.println(batchVisitor); for (VisitorInfo visitorInfo : visitorList) { System.out.println(visitorInfo); visitorInfoService.save(visitorInfo); } return new VisitorInfo(1, "dd", "bb", new Date(), 1, 2); }
对付上面响应了工具到页面，会报错，需要导入json的依赖。