1. 需要注意的問題
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>時(shí)間/td>
td>direction/td>
td>type/td>
td>操作/td>
/tr>
tbody id="tbody">
tr>
td>
!-- 集合為自定義實(shí)體類中的結(jié)合屬性，有幾個(gè)實(shí)體類，改變下標(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"/>離開
/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)前行, 通過父級(jí)來綁定...
// $(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'/>離開" +
"/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'/>離開" +
"/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í)體類BatchVisitor ，定義集合接收多個(gè)對(duì)象
package cn.bitqian.entity;
import java.util.ArrayList;
import java.util.List;
/**
* 批量新增 visitorInfo
* @author echo lovely
*
*/
public class BatchVisitor {
private ListVisitorInfo> visitorList = new ArrayList>();
public ListVisitorInfo> getVisitorList() {
return visitorList;
}
public void setVisitorList(ListVisitorInfo> visitorList) {
this.visitorList = visitorList;
}
public BatchVisitor() {}
}
controller方法，放實(shí)體類，實(shí)體類里面套VisitorInfo的集合
@RequestMapping(value="/batchAdd", method=RequestMethod.POST)
@ResponseBody
public VisitorInfo batchAddVisitor(BatchVisitor batchVisitor) {
ListVisitorInfo> 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ì)象到頁面，會(huì)報(bào)錯(cuò)，需要導(dǎo)入json的依賴。
!-- 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>
接收頁面的參數(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)文章希望大家以后多多支持腳本之家！
標(biāo)簽：婁底 衡陽 內(nèi)江 樂山 德陽 海南 黔東 邯鄲
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法》，本文關(guān)鍵詞 springmvc,結(jié)合,ajax,批量,新增,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
