springmvc結(jié)合ajax如何實現(xiàn)批量增加

這篇文章主要講解了“springmvc 結(jié)合ajax如何實現(xiàn)批量增加”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“springmvc 結(jié)合ajax如何實現(xiàn)批量增加”吧！

成都創(chuàng)新互聯(lián)是專業(yè)的文昌網(wǎng)站建設(shè)公司，文昌接單;提供網(wǎng)站設(shè)計、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行文昌網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

1. 需要注意的問題

mvc框架的處理日期問題
@ResponseBody響應(yīng)對象是自定義對象，響應(yīng)不是json
@ResopnseBody響應(yīng)自定義對象時，日期為是long類型的數(shù)
結(jié)束數(shù)據(jù)方法的參數(shù)，該如何定義？接收多個對象？

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>
						<!-- 集合為自定義實體類中的結(jié)合屬性，有幾個實體類，改變下標(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)前行, 通過父級來綁定...
				// $(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ù)接收

批量新增實體類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);
	}

對于上面響應(yīng)了對象到頁面，會報錯，需要導(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會將字符串轉(zhuǎn)換為對應(yīng)格式的日期

springmvc 結(jié)合ajax如何實現(xiàn)批量增加

響應(yīng)對象有日期時，解決：

springmvc 結(jié)合ajax如何實現(xiàn)批量增加

感謝各位的閱讀，以上就是“springmvc 結(jié)合ajax如何實現(xiàn)批量增加”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對springmvc 結(jié)合ajax如何實現(xiàn)批量增加這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

名稱欄目：springmvc結(jié)合ajax如何實現(xiàn)批量增加
標(biāo)題網(wǎng)址：http://bm7419.com/article28/jdijjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航、ChatGPT、網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容