springmvc 结合ajax批量新增的实现方法

2024-08-17 03:21:11

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() {

				// 自增1
				index_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定义参数接收

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

<!-- 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批量新增内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

SpringMVC+Ajax实现文件批量上传和下载功能实例代码

今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了. 上传form: <form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload&q
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

Ajax文件下载利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 1.导入组件并准备静态脚本 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> &l
SpringMVC环境下实现的Ajax异步请求JSON格式数据

一环境搭建首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem
Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站前后端分离最后跪在ajax跨域上面了自己在网上找了个方法亲试可用记录一下写一个类继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha
spring mvc利用ajax向controller传递对象的方法示例

前言最近因为工作的需要,在写一个基于springmvc+spring+mybatis的项目,其中涉及用ajax向controller发送数据的功能.因为不想使用spring的form标签,所以想看看有没有方法将ajax中的json数据直接转化为controller方法中的对象接收并处理.以下将逐渐介绍各种不同情况下传递json数据并封装的方法,下面话不多说,一起来看看详细的介绍: 基础类型如果传递的json数据为基础类型(Int,String等)的话,则只需要用@RequestParam标注
springmvc 结合ajax批量新增的实现方法

1. 需要注意的问题 mvc框架的处理日期问题 @ResponseBody响应对象是自定义对象,响应不是json @ResopnseBody响应自定义对象时,日期为是long类型的数结束数据方法的参数,该如何定义?接收多个对象? 2. 页面代码 <%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding=&
mybatis学习之路mysql批量新增数据的方法

接下来两节要探讨的是批量插入和批量更新,因为这两种操作在企业中也经常用到. mysql新增语句 insert into 表名(字段,字段...) values ( 值,值 ...):此种适合单条插入. 批量插入,一种可以在代码中循环着执行上面的语句,但是这种效率太差,下面会有对比,看看它有多差. 另一种,可以用mysql支持的批量插入语句, insert into 表名(字段,字段...) values ( 值,值 ...),( 值,值 ...),( 值,值 ...).... 这种方式相比起来,
springmvc 发送ajax出现中文乱码的解决方法汇总

使用spingmvc,在JS里面通过ajax发送请求,并返回json格式的数据,从数据库拿出来是正确的中文格式,展示在页面上就是错误的??,研究了一下,有几种解决办法. 我使用的是sping-web-3.2.2,jar 方法一: 在@RequestMapping里面加入produces = "text/html;charset=UTF-8" @RequestMapping(value = "/configrole", method = RequestMethod
springMVC解决ajax请求乱码的三种方法

springMVC解决ajax请求乱码的问题前言: 最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码.首先第一种是因为我们在web.xml中配置了spring的字符编码过滤器,那么使用ajax请求为什么就不行了呢?下面简单的分析一下,仅供参考. 先列出简单的请求代码: 浏览器端: <script type="text/javascript"> $.ajax({ type: "P
mysql批量新增和存储的方法实例

登录压测时,需要很多不同的用户,此时需要向数据库新增数据 #批量添加用户账号--存储过程: delimiter // drop procedure if exists test; create procedure test() begin DECLARE i int; set i = 1; while i<21 do insert into hg_user values (concat("OM_TEST",cast(i as CHAR)),concat("OM_TEST
SpringMVC使用MultipartFile 实现异步上传方法介绍

目的是实现异步上传 1.添加pom依赖添加pom依赖,因为用的ajax,数据需要转成json的格式进行传输,所以还有加入一个JSON jar包: <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
SpringMVC中controller接收json数据的方法

本文实例为大家分享了SpringMVC中controller接收json数据的方法,供大家参考,具体内容如下 1.jsp页面发送ajax的post请求: function postJson(){ var json = {"username" : "imp", "password" : "123456"}; $.ajax({ type : "post", url : "<%=basePath
使用Nginx 反向代理来避免 ajax 跨域请求的方法

服务器上 nginx + tomcat ,其中 nginx 监听 80 端口, tomcat 监听 8080 端口. 因为对前端不熟悉,以为用 ajax 就可以不需要 callback ,然而前端的同学说不跨域的情况下才不需要 callback ,让我在返回的 json 里加上.可是我刚刚学会了最基本的 spring-mvc 用法,根本不知道怎么加上 callback 网上到时找到一些可行的代码,差不多这个样子: @RequestMapping(method=RequestMethod.GET,
解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: <ul id="demo"> <li class
利用SpringMVC和Ajax实现文件上传功能

个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml

springmvc 结合ajax批量新增的实现方法

相关推荐

随机推荐