javaでのjsonのやり取りについて

Question

たびたびの質問ですが、よろしくお願いいたします。
現在参考書を参考にjavaコード練習をしているのですが、よくわからない点があります。

コード
<form name="LoginForm" id="LoginForm" method="post" action="#">
			User name:<input type="text" name="userName" />
			Password :<input type="password" name="password">
			<button type="submit">Login</button>
 		</form>

こちらのformタグから送信した際にjavacontrollerに記述した

コード
@ResponseBody
	@PostMapping("/api/login")
	public String loginApi(@RequestBody LoginForm form) {
		List<User> users=userRepos.findByUserNameAndPassword(form.getUserName(), form.getPassword());
		
		LoginDto dto=new LoginDto(0,null,null,"ゲスト");
		if(users.size() > 0) {
			dto=new LoginDto(users.get(0));
		}
		return gson.toJson(dto);
	}

こちらのコードに値が送信されてgsonを使って？jsファイルにjavaのデータを送っています。

コード
$.ajax({
		type: 'POST',
		url: '/ecsite/api/login',
		data:JSON.stringify(jsonString),
		contentType: 'application/json',
		datatype: 'json',
		scriptCharset: 'utf-8'
	})

そしてjsonでここのコードでjavaから送られてきた値をjsonを使って？受け取っていると思います。

質問の内容ですが
１．formタグのactionで#を記載しているのになぜ/api/loginが処理を担当することになったのでしょうか？action="/api/loginと書いてあるなら理解できますが、どうして#で処理が渡されるのか理解できません。
2.ajax.gson.jsonこのあたりの意味も検索したりしましたがいまいちよく理解できておりませんので簡潔に教えていただけるとありがたいです。
３．jsonのデータというのは何を表しているのでしょうか？

ながい文章で申し訳ありません。
回答いただけると助かります。
宜しくお願いいたします。

Answer 1

ソースコードに省略が多く、詳しいことは分かりませんが、恐らく、ご質問にあるコードの動きを正しく理解されていないように思えます。
そのプログラムは、

1. ブラウザで入力したformの内容を、JSON形式でControllerに渡す（これをJavascriptのajaxメソッドで行っている）
2. これを受け取ったControllerが、入力されたユーザー名・パスワードのユーザーの情報を（Javaオブジェクトで）生成する
3. これをGSONでJSON形式に変換し、ブラウザ側に返す

ということを行っています。

1.formタグのactionで#を記載しているのになぜ/api/loginが処理を担当することになったのでしょうか？action="/api/loginと書いてあるなら理解できますが、どうして#で処理が渡されるのか理解できません。

action="#"のときは、このままだとPOSTリクエストは外部には送信されません（よってControllerには処理が渡らない）。
そのコードでは、その代わりにJavascriptのコードのajaxメソッドで送信しているように見えます。

2.ajax.gson.jsonこのあたりの意味も検索したりしましたがいまいちよく理解できておりませんので簡潔に教えていただけるとありがたいです。

3.jsonのデータというのは何を表しているのでしょうか？

「簡潔に」説明したとしてあなたが理解できるのか分かりませんが、（インターネットで調べると、十分に詳しい説明は出てくると思うので。）

ajax

「非同期通信」のことです。非同期通信というのは、Webの世界で言うと、画面遷移をしないで（ページ全体を読み込むことなしに）データの送受信を行うことです。
form要素でaction="○○"の○○の部分にURLを指定すると、データを送信した後にその画面に遷移します（どういう画面に遷移するかという情報をControllerが渡すことになります）が、今回は、同じ画面にとどまったまま、フォームの内容を送信しています。

gson

JSON形式の文字列とJavaのオブジェクトを相互変換する機能（ライブラリ）です。今回は、恐らくreturn gson.toJson(dto);の部分で、JavaのオブジェクトをJSON形式に変換しています。

json

項目の名前と項目の中身をセットで書くことが出来る書式です。「何を表しているか」は、JSON形式で書かれている内容次第ということになります。
今回は、恐らく

{
    “userName” : “hoge”,
    “password” : “fuga”,
}

というようなデータがControllerに渡されているのだと思われます。

上記の説明で理解できないということでしたら、恐らくあなたに必要なのは「簡潔な」説明ではなく、「初心者にもよくわかる懇切丁寧な説明」だと思います。
具体的に「どのページを見て」「どの部分が」分からなかったかを書いていただいた方がよいのではないでしょうか。

Comments

[markun6250]

ありがとうございます。
参考にコードを何度も読み返し、ある程度理解することができました。