ajaxバッチ追加と組み合わせたspringmvcの実装方法を詳しく解説-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ajaxバッチ追加と組み合わせたspringmvcの実装方法を詳しく解説

coldplay.xixi

Dec 03, 2020 pm 05:28 PM

ajaxspringmvc

ajax ビデオチュートリアルAjax バッチの追加方法を紹介するコラム

ajaxバッチ追加と組み合わせたspringmvcの実装方法を詳しく解説

おすすめ (無料): ajax ビデオチュートリアル

1. 注意が必要な問題

##@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(&#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 はひどいことを学習しました...削除できます。私の削除は、最初にすべての行を削除し、行を再生成し、以前に生成された行と比較することです。行が 1 行減ります。

3. コントローラー定義パラメータの受け取り

新規エンティティクラス 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 をエンティティクラス上記のオブジェクトがページに応答し、json 依存関係をインポートする必要がある場合、コレクション

@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 用于响应 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 は文字列を日付に変換します。対応する形式

応答オブジェクトに日付がある場合、解決策は次のとおりです:

ajaxバッチ追加と組み合わせたspringmvcの実装方法を詳しく解説

##これで、springmvc と ajax バッチ追加の組み合わせについての記事は終了します。springmvc バッチ追加の詳細については、Script House の過去の記事を検索するか、引き続き注目してください。

プログラミング学習について詳しく知りたい方は、

php training

のコラムに注目してください！

以上がajaxバッチ追加と組み合わせたspringmvcの実装方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はjb51で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

See all articles