recherche

Maison >interface Web >js tutoriel >Comment implémenter springmvc combiné avec l'ajout de lots ajax

Comment implémenter springmvc combiné avec l'ajout de lots ajax

coldplay.xixi
coldplay.xixiavant
2020-11-26 17:38:263283parcourir

Tutoriel vidéo ajaxLa colonne présente principalement la méthode d'implémentation de springmvc combinée avec l'ajout par lots ajax

Comment implémenter springmvc combiné avec l'ajout de lots ajax

Recommandé (gratuit) : tutoriel vidéo ajax

1.

  • Problème de traitement de date du framework MVC
  • L'objet de réponse @ResponseBody est un objet personnalisé, et la réponse n'est pas json
  • Lorsque @ResopnseBody répond à un objet personnalisé, la date est longue Comment définir les paramètres de la méthode end data de type
  • ? Recevoir plusieurs objets ?

2. Code de page 

<%@ 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(&#39;click&#39;, &#39;.remove&#39;, 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=&#39;text&#39; name=&#39;visitorList[" + i + "].name&#39;/>" +
								"</td>" +   
								    
								"<td>" +   
								"	<input type=&#39;text&#39; name=&#39;visitorList[" + i + "].cardNo&#39;/>" +
								"</td>" +   
							    
								"<td>" +   
								"	<input type=&#39;date&#39; name=&#39;visitorList[" + i + "].visitorTime&#39;/>" +
								"</td>" +
							
								"<td>" +
								"	<input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + i + "].direction&#39;/>进入" +
								"	<input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + i + "].direction&#39;/>离开" +
								"</td>" +					
							
								"<td>" +       
								"	<input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + i + "].type&#39;/> 内部" +
								"	<input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + i + "].type&#39;/> 外部" +
								"</td>" +
					
								"<td>" +
								"	<input class=&#39;remove&#39; type=&#39;button&#39; value=&#39;移除&#39;>" +
								"</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=&#39;text&#39; name=&#39;visitorList[" + index_val + "].name&#39;/>" +
						"</td>" +   
						    
						"<td>" +   
						"	<input type=&#39;text&#39; name=&#39;visitorList[" + index_val + "].cardNo&#39;/>" +
						"</td>" +   
					    
						"<td>" +   
						"	<input type=&#39;date&#39; name=&#39;visitorList[" + index_val + "].visitorTime&#39;/>" +
						"</td>" +
					
						"<td>" +
						"	<input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + index_val + "].direction&#39;/>进入" +
						"	<input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + index_val + "].direction&#39;/>离开" +
						"</td>" +					
					
						"<td>" +       
						"	<input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + index_val + "].type&#39;/> 内部" +
						"	<input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + index_val + "].type&#39;/> 外部" +
						"</td>" +
			
						"<td>" +
						"	<input class=&#39;remove&#39; type=&#39;button&#39; value=&#39;移除&#39;>" +
						"</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 appris terriblement... Ma suppression consiste à supprimer d'abord toutes les lignes, à régénérer les lignes et à comparer celles générées précédemment. lignes. , une ligne en moins.

3. Le contrôleur définit la réception des paramètres

Batch ajoute la classe d'entité BatchVisitor, définit la collection pour recevoir plusieurs objets

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() {}

}

méthode du contrôleur, place la classe d'entité et définit VisitorInfo dans la classe d'entité La collection 

@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);
	}

signalera une erreur si elle répond à l'objet ci-dessus et doit importer des dépendances 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>

reçoit les paramètres de la page et doit convertir la chaîne en date. Vous avez besoin d'un
convertisseur de date personnalisé mvc
ou ajouter des annotations. MVC convertira la chaîne en date dans le correspondant. format

Lorsque l'objet de réponse a une date, la solution est :

Comment implémenter springmvc combiné avec lajout de lots ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comprendre la chaîne de prototypes js, l'héritage et la promesseArticle suivant：Comprendre la chaîne de prototypes js, l'héritage et la promesse

Articles Liés

Voir plus