ajax调接口处理表格
show you my codes.
页面新增按钮
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/> 5 <title>中登网信息导入</title> 6</head> 7<body> 8<div style="width:90%;margin-top:5px;margin-left: 40px"> 9 <table style="width:100%;"> 10 <tr> 11 <td> 12 <div style="margin-top:5px;margin-left:10px;"> 13 <font style="font-size:16px;color:#6FB3E0;"> 14 上传中登网信息文件，点击【导入】进行上传，仅支持.xlsx或.xls格式。 15 </font> 16 </div> 17 </td> 18 </tr> 19 </table> 20</div> 21<div style="width:90%;margin-top:5px;margin-left: 60px"> 22 <table style="width:100%;"> 23 <tr> 24 <td> 25 <form id="uploadForm" enctype="multipart/form-data" method="post"> 26 <input id="file" type="file" name="file" accept=".xls,.xlsx"> 27 </form> 28 </td> 29 <td> 30 <input type="button" id="upload" value="导入"> 31 </td> 32 <td></td> 33 <td></td> 34 </tr> 35 </table> 36</div> 37<br> 38 39<script type="text/javascript" language="JavaScript"> 40 41 $('#upload').click(function () { 42 let formData = new FormData($('#uploadForm')[0]); 43 if(document.getElementById('file').files[0] == null){ 44 alert("请选择一个要上传的文件！"); 45 return; 46 } 47 $.ajax({ 48 type: 'POST', 49 url: '/mogo/api/netRegister/netRegisterExcelDetail', 50 data: formData, 51 cache: false, 52 processData: false, 53 contentType: false, 54 }).success(function (data) { 55 if (data.code === '0000') { 56 alert("导入成功!"); 57 document.getElementById('uploadForm')&&document.getElementById('uploadForm').reset(); 58 } else { 59 alert("导入失败!"); 60 } 61 }).error(function () { 62 alert("导入失败"); 63 }); 64 }); 65</script> 66</body> 67</html>
接口编写
controller
1@Controller 2@Slf4j 3@RequestMapping("/netRegister") 4public class NetRegisterController { 5 6 @Autowired 7 NetRegisterInformationService netRegisterInfoService; 8 9 @RequestMapping("/netRegisterExcelDetail") 10 @ResponseBody 11 public GeneralResponse zdwExcelDetail(@RequestParam("file") MultipartFile file) throws IOException { 12 return netRegisterInfoService.zdwExcelDetail(file); 13 } 14}
serviceImpl
1/** 2 * 中登网excel文件操作 3 * 4 * @param file excel表格文件 5 */ 6 @Override 7 public GeneralResponse zdwExcelDetail(MultipartFile file) throws IOException { 8 if (file.isEmpty()) { 9 return GeneralResponse.fail("文件为空!"); 10 } 11 int begin = file.getOriginalFilename().indexOf("."); 12 int last = file.getOriginalFilename().length(); 13 String extension = file.getOriginalFilename().substring(begin, last); 14 if (".xlsx".equals(extension) || ".xls".equals(extension)) { 15 // excel数据读取并存到数据库中 16 EasyExcel.read(file.getInputStream(), NetRegisterEntity.class, new NetRegisterInfoListener(this)).sheet().doRead(); 17 } 18 return GeneralResponse.success(); 19 }
service
1 2public interface NetRegisterInformationService { 3 /** 4 * 中登网excel文件操作 5 * 6 * @param file excel表格文件 7 */ 8 GeneralResponse zdwExcelDetail(MultipartFile file) throws IOException; 9}
实体类
1 2@Data 3public class NetRegisterEntity { 4 /** 5 * 申请编号 6 */ 7 private String asqbh; 8 9 /** 10 * 中登网修改码 11 */ 12 @ExcelProperty(index = 1) 13 private String contractNo; 14 /** 15 * 中登网修改码 16 */ 17 @ExcelProperty(index = 13) 18 private String modificationCode; 19 /** 20 * 中登网编号 21 */ 22 @ExcelProperty(index = 14) 23 private String netNumber; 24 /** 25 * 登记日期 26 */ 27 @ExcelProperty(index = 15) 28 @DateTimeFormat("yyyy/MM/dd") 29 private String registerDate; 30}
监听器
1 2@Slf4j 3public class NetRegisterInfoListener extends AnalysisEventListener<NetRegisterEntity> { 4 private static final Logger LOGGER = LoggerFactory.getLogger(NetRegisterInfoListener.class); 5 6 /** 7 * 每隔5条存储数据库，实际使用中可以3000条，然后清理list ，方便内存回收 8 */ 9 private static final int BATCH_COUNT = 520; 10 List<NetRegisterEntity> list = new ArrayList<NetRegisterEntity>(); 11 private int failSum = 0; 12 private int successSum = 0; 13 14 /** 15 * 假设这个是一个DAO，当然有业务逻辑这个也可以是一个service。当然如果不用存储这个对象没用。 16 */ 17 private NetRegisterInformationService service; 18 19 /** 20 * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来 21 * 22 * @param service 23 */ 24 public NetRegisterInfoListener(NetRegisterInformationService service) { 25 this.service = service; 26 } 27 28 /** 29 * 会一行行得返回头 30 * 31 * @param headMap 32 * @param context 33 */ 34 @Override 35 public void invokeHead(Map<Integer, CellData> headMap, AnalysisContext context) { 36// log.info("解析到一条头数据:{}", JSON.toJSONString(headMap)); 37 } 38 39 /** 40 * 这个每一条数据解析都会来调用 41 * 42 * @param data 43 * @param analysisContext 44 */ 45 @Override 46 public void invoke(NetRegisterEntity data, AnalysisContext analysisContext) { 47 list.add(data); 48 // 达到BATCH_COUNT了，需要去存储一次数据库，防止数据几万条数据在内存，容易OOM 49 if (list.size() >= BATCH_COUNT) { 50 saveData(); 51 // 存储完成清理 list 52 list.clear(); 53 } 54 } 55 56 /** 57 * 数据解析完了开始调用 58 * 59 * @param analysisContext 60 */ 61 @Override 62 public void doAfterAllAnalysed(AnalysisContext analysisContext) { 63 // 这里也要保存数据，确保最后遗留的数据也存储到数据库 64 saveData(); 65 log.info("所有数据解析完成！成功条数:{}, 失败条数:{}", successSum, failSum); 66 } 67 68 /** 69 * 存储数据库 70 */ 71 private void saveData() { 72 log.info("{}条数据，开始存储数据库！", list.size()); 73 Map<String, List<String>> map = service.saveOrUpdate(list); 74 failSum += map.get("fail").size(); 75 successSum += map.get("success").size(); 76 log.info("存储数据库成功！"); 77 } 78}