springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法
更新時(shí)間：2020年11月09日 09:04:35 作者：bitQian
這篇文章主要介紹了springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1. 需要注意的問(wèn)題
- mvc框架的處理日期問(wèn)題
- @ResponseBody響應(yīng)對(duì)象是自定義對(duì)象，響應(yīng)不是json
- @ResopnseBody響應(yīng)自定義對(duì)象時(shí)，日期為是long類(lèi)型的數(shù)
- 結(jié)束數(shù)據(jù)方法的參數(shù)，該如何定義？接收多個(gè)對(duì)象？
2. 頁(yè)面代碼
<%@ 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>時(shí)間</td>
<td>direction</td>
<td>type</td>
<td>操作</td>
</tr>
<tbody id="tbody">
<tr>
<td>
<!-- 集合為自定義實(shí)體類(lèi)中的結(jié)合屬性，有幾個(gè)實(shí)體類(lèi)，改變下標(biāo)就行了。 -->
<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"/>進(jìn)入
<input type="radio" value="2" name="visitorList[0].direction"/>離開(kāi)
</td>
<td>
<input type="radio" value="1" name="visitorList[0].type"/> 內(nèi)部
<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() {
// 移除當(dāng)前行, 通過(guò)父級(jí)來(lái)綁定...
// $(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'/>進(jìn)入" +
" <input type='radio' value='2' name='visitorList[" + i + "].direction'/>離開(kāi)" +
"</td>" +
"<td>" +
" <input type='radio' value='1' name='visitorList[" + i + "].type'/> 內(nèi)部" +
" <input type='radio' value='2' name='visitorList[" + i + "].type'/> 外部" +
"</td>" +
"<td>" +
" <input class='remove' type='button' value='移除'>" +
"</td>" +
"</tr>";
}
$("#tbody").append(data_str);
}
// 把下標(biāo)減少一 就行了，就是移除了。
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'/>進(jìn)入" +
" <input type='radio' value='2' name='visitorList[" + index_val + "].direction'/>離開(kāi)" +
"</td>" +
"<td>" +
" <input type='radio' value='1' name='visitorList[" + index_val + "].type'/> 內(nèi)部" +
" <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學(xué)得terrible… 能夠移除，我的移除是先移除所有的行，重新生成行，比較之前生成的行，少一行。
3. controller定義參數(shù)接收
批量新增實(shí)體類(lèi)BatchVisitor ，定義集合接收多個(gè)對(duì)象
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方法，放實(shí)體類(lèi)，實(shí)體類(lèi)里面套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);
}
對(duì)于上面響應(yīng)了對(duì)象到頁(yè)面，會(huì)報(bào)錯(cuò)，需要導(dǎo)入json的依賴(lài)。
<!-- json 用于響應(yīng) 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>
接收頁(yè)面的參數(shù)，需要字符串轉(zhuǎn)型為日期，需要
mvc自定義日期轉(zhuǎn)換器
或者加上注解，mvc會(huì)將字符串轉(zhuǎn)換為對(duì)應(yīng)格式的日期
響應(yīng)對(duì)象有日期時(shí)，解決：
到此這篇關(guān)于springmvc 結(jié)合ajax批量新增的文章就介紹到這了,更多相關(guān)springmvc批量新增內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- SpringMVC集成redis配置的多種實(shí)現(xiàn)方法
- 淺談springMVC中controller的幾種返回類(lèi)型
- Spring MVC獲取HTTP請(qǐng)求頭的兩種方式小結(jié)
- 解決SpringMVC項(xiàng)目連接RabbitMQ出錯(cuò)的問(wèn)題
- SpringMVC和rabbitmq集成的使用案例
- SpringMVC異步處理操作(Callable和DeferredResult)
- Spring MVC數(shù)據(jù)處理和亂碼問(wèn)題詳解
- 基于IDEA創(chuàng)建SpringMVC項(xiàng)目流程圖解
- SpringMVC使用@PathVariable接收參數(shù)過(guò)程解析
- 如何理解SpringMVC
相關(guān)文章
ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
解決ajax的delete、put方法接收不到參數(shù)的問(wèn)題方法
今天小編就為大家分享一篇解決ajax的delete、put方法接收不到參數(shù)的問(wèn)題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Ajax實(shí)現(xiàn)局部刷新的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Ajax實(shí)現(xiàn)局部刷新的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Ajax提交表單頁(yè)面刷新很快的解決方法,需要的朋友可以參考下2017-01-01
快速解決ajax請(qǐng)求出錯(cuò)狀態(tài)碼為0的問(wèn)題
下面小編就為大家分享一篇快速解決ajax請(qǐng)求出錯(cuò)狀態(tài)碼為0的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
添加后臺(tái)list給前臺(tái)select標(biāo)簽賦值簡(jiǎn)單實(shí)現(xiàn)
本文為大家介紹下通過(guò)添加后臺(tái)list怎么實(shí)現(xiàn)給前臺(tái)select標(biāo)簽賦值，具體代碼如下，感興趣的朋友可以參考下哈2013-07-07
django中使用jquery ajax post數(shù)據(jù)出現(xiàn)403錯(cuò)誤的解決辦法(兩種方法)
在django中，使用jquery ajax post數(shù)據(jù)，會(huì)出現(xiàn)403的錯(cuò)誤，大家知道該如何解決嗎?下面由腳本之家小編給大家分享兩種解決辦法，需要的朋友可以參考下2015-09-09
Ajax對(duì)xml信息的接收和處理操作實(shí)例分析
這篇文章主要介紹了Ajax對(duì)xml信息的接收和處理操作,結(jié)合實(shí)例形式分析了ajax針對(duì)xml結(jié)構(gòu)信息的相關(guān)處理操作技巧,需要的朋友可以參考下2019-07-07
下面小編就為大家?guī)?lái)一篇Ajax解決緩存的5種方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
Ajax調(diào)用restful接口傳送Json格式數(shù)據(jù)的方法
這篇文章主要介紹了Ajax調(diào)用restful接口傳送Json格式數(shù)據(jù)的方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-07-07