1. 首页
  2. 文章中心
  3. AJAX

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

230 阅读 0 评论
我是靠谱客的博主 高高月亮，这篇文章主要介绍springmvc 结合ajax批量新增的实现方法，现在分享给大家，希望可以做个参考。

1. 需要注意的问题

  • mvc框架的处理日期问题
  • @ResponseBody响应对象是自定义对象，响应不是json
  • @ResopnseBody响应自定义对象时，日期为是long类型的数
  • 结束数据方法的参数，该如何定义？接收多个对象？

2. 页面代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<%@ 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 ，定义集合接收多个对象

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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的集合

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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的依赖。

复制代码
1
2
3
4
5
6
7
<!-- 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批量新增的实现方法的全部内容，更多相关springmvc内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(152)

相关文章

Ajax实现登录案例
Ajax实现登录案例
Ajax实现局部刷新的方法实例
Ajax实现局部刷新的方法实例
ajax异步实现文件分片上传实例代码
ajax异步实现文件分片上传实例代码
AJAX实现注册验证用户名
AJAX实现注册验证用户名
springmvc 结合ajax批量新增的实现方法
springmvc 结合ajax批量新增的实现方法
Ajax实现省市县三级联动
Ajax实现省市县三级联动
ajax请求添加自定义header参数代码
ajax请求添加自定义header参数代码
利用ajax+php实现商品价格计算
利用ajax+php实现商品价格计算

评论列表共有 0 条评论

立即
投稿
返回
顶部