springmvc 结合ajax批量新增

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="js/jquery-3.4.1.js"></script></head><body><form id="myForm"><table border="1" ><tr><td>姓名</td><td>身份证</td><td>时间</td><td>direction</td><td>type</td><td>操作</td></tr><tbody id="tbody"><tr><td><!-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。 --><input type="text" name="visitorList[0].name"/></td><td><input type="text" name="visitorList[0].cardNo"/></td><td><input type="date" name="visitorList[0].visitorTime"/></td><td><input type="radio" value="1" name="visitorList[0].direction"/>进入<input type="radio" value="2" name="visitorList[0].direction"/>离开</td>                    <td><input type="radio" value="1" name="visitorList[0].type"/> 内部<input type="radio" value="2" name="visitorList[0].type"/> 外部</td><td><input class="remove" type="button" value="移除"></td>                                        </tr></tbody><tr><td colspan="6"><input id="add" type="button" value="新增visitor" /><input id="save" 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' name='visitorList[" + i + "].name'/>" +"</td>" +                   "<td>" +                    "    <input type='text' name='visitorList[" + i + "].cardNo'/>" +"</td>" +                 "<td>" +                  "  <input type='date' name='visitorList[" + i + "].visitorTime'/>" +"</td>" +"<td>" +"    <input type='radio' value='1' name='visitorList[" + i + "].direction'/>进入" +" <input type='radio' value='2' name='visitorList[" + i + "].direction'/>离开" +"</td>" +                 "<td>" +                                                    " <input type='radio' value='1' name='visitorList[" + i + "].type'/> 内部" +" <input type='radio' value='2' name='visitorList[" + i + "].type'/> 外部" +"</td>" +"<td>" +"  <input class='remove' type='button' value='移除'>" +"</td>" +                                       "</tr>";                        }$("#tbody").append(data_str);}// 把下标减少一 就行了，就是移除了。index_val --;console.log("remove: ", index_val);});$("#add").click(function() {// 自增1index_val ++;var data_str = "<tr>" +"<td>" +"    <input type='text' name='visitorList[" + index_val + "].name'/>" +"</td>" +                   "<td>" +                    "    <input type='text' name='visitorList[" + index_val + "].cardNo'/>" +"</td>" +                 "<td>" +                  "  <input type='date' name='visitorList[" + index_val + "].visitorTime'/>" +"</td>" +"<td>" +"    <input type='radio' value='1' name='visitorList[" + index_val + "].direction'/>进入" +" <input type='radio' value='2' name='visitorList[" + index_val + "].direction'/>离开" +"</td>" +                 "<td>" +                                                    " <input type='radio' value='1' name='visitorList[" + index_val + "].type'/> 内部" +" <input type='radio' value='2' name='visitorList[" + index_val + "].type'/> 外部" +"</td>" +"<td>" +"  <input class='remove' 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定义参数接收

实体类VisitorInfo


package cn.bitqian.entity;import java.util.Date;import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;import org.springframework.format.annotation.DateTimeFormat;import com.fasterxml.jackson.annotation.JsonFormat;@Table(name="visit_info")
@Entity(name="VisitorInfo")
public class VisitorInfo {@Id@GeneratedValue(strategy=GenerationType.AUTO)private Integer id;private String name;@Column(name="card_no")private String cardNo;@Column(name="visitor_time") // datetime@DateTimeFormat(pattern="yyyy-MM-dd") // 页面提交来的@JsonFormat(pattern="yyyy-MM-dd") // 服务器响应回来的json日期格式private Date visitorTime;private Integer direction; // 1进入 2 离开private Integer type; // 1. 内部 2. 外部public VisitorInfo() {}public VisitorInfo(Integer id, String name, String cardNo, Date visitorTime, Integer direction, Integer type) {super();this.id = id;this.name = name;this.cardNo = cardNo;this.visitorTime = visitorTime;this.direction = direction;this.type = type;}// setter/getter 省略}

批量新增实体类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)@ResponseBodypublic 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的依赖。

 <!-- json 用于响应 responseBody --><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.6</version></dependency>

接收页面的参数，需要字符串转型为日期，需要
mvc自定义日期转换器
或者加上注解，mvc会将字符串转换为对应格式的日期

响应对象有日期时，解决：

springmvc 结合ajax批量新增相关推荐

springmvc+mybatis+ajax 批量插入数据
2019独角兽企业重金招聘Python工程师标准>>> 批量插入.AJAX发起请求,核心代码如下: var mids = new Array(); for (var i=0; i&l ...
SSM之SpringMVC 04 —— Ajax、拦截器、文件上传和下载
系列文章 SSM之SpringMVC 01 -- SpringMVC原理及概念.Hello SpringMVC 注解版和配置版 SSM之SpringMVC 02 -- Controller和RestF ...
SpringMVC对Ajax请求的处理
SpringMVC对Ajax请求的处理 [1] 问题: 当浏览器发起一个ajax请求给服务器,服务器调用对应的单元方法处理ajax请求. 而ajax的请求在被处理完成后,其处理结果需要直接响应.而目前 ...
JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
使用SpringMVC解决Ajax跨域问题
使用SpringMVC解决Ajax跨域问题参考文章: (1)使用SpringMVC解决Ajax跨域问题 (2)https://www.cnblogs.com/mengyao/p/6294787.ht ...
springMVC通过ajax传递参数list对象或传递数组对象到后台
springMVC通过ajax传递参数list对象或传递数组对象到后台环境: 前台传递参数到后台前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串 ...
ajax数据传送中文乱码,springmvc 发送ajax出现中文乱码的解决方法汇总
使用spingmvc,在JS里面通过ajax发送请求,并返回json格式的数据,从数据库拿出来是正确的中文格式,展示在页面上就是错误的??,研究了一下,有几种解决办法. 我使用的是sping-web- ...
c mysql批量添加数据类型_mybatis学习之路----mysql批量新增数据
原文:https://blog.csdn.net/xu1916659422/article/details/77971867 接下来两节要探讨的是批量插入和批量更新,因为这两种操作在企业中也经常用到. ...
linq to object 、linq to sql 、linq to entity 批量新增、更新、删除功能扩展
最近在codeplex上找到了一个功能比较全的linq to object .linq to sql .linq to entity新增.修改.删除功能扩展的控件--magiq. 以linq to s ...

springmvc 结合ajax批量新增

目录

1. 需要注意的问题

2. 页面代码

3. controller定义参数接收

springmvc 结合ajax批量新增相关推荐

最新文章

热门文章