详解springmvc 结合ajax批量新增的实现方法
ajax视频教程栏目介绍ajax批量新增的方法
推荐（免费）：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() {
// 自增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批量新增内容请搜索脚本之家以前的文章或继续关注。
想了解更多编程学习，敬请关注php培训栏目！
以上是详解springmvc 结合ajax批量新增的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
解决jQuery AJAX请求遇到403错误的方法
Feb 20, 2024 am 10:07 AM
标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资
SpringBoot与SpringMVC的比较及差别分析
Dec 29, 2023 am 11:02 AM
SpringBoot和SpringMVC都是Java开发中常用的框架，但它们之间有一些明显的差异。本文将探究这两个框架的特点和用途，并对它们的差异进行比较。首先，我们来了解一下SpringBoot。SpringBoot是由Pivotal团队开发的，它旨在简化基于Spring框架的应用程序的创建和部署。它提供了一种快速、轻量级的方式来构建独立的、可执行
解决jQuery AJAX请求403错误的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
如何解决jQuery AJAX报错403的问题？
Feb 23, 2024 pm 04:27 PM
如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
比较SpringBoot与SpringMVC的差异是什么？
Dec 29, 2023 am 10:46 AM
SpringBoot与SpringMVC的不同之处在哪里？SpringBoot和SpringMVC是两个非常流行的Java开发框架，用于构建Web应用程序。尽管它们经常分别被使用，但它们之间的不同之处也是很明显的。首先，SpringBoot可以被看作是一个Spring框架的扩展或者增强版。它旨在简化Spring应用程序的初始化和配置过程，以帮助开发人
PHP 与 Ajax：创建动态加载内容的解决方案
Jun 06, 2024 pm 01:12 PM
Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。
