Spring bootでjQueryのajax処理

前提・実現したいこと

初心者です。

今現在、Spring bootを使ってECサイトを作成している最中です。
今やろうとしていることは、新規アカウント登録からユーザー名を入力した際、同名のユーザー名があった場合にjQueryによってDBに問合せてアラートを表示するというものです。
つまり、「webページにユーザー名を入力→DBに問合せ→ユーザー名が重複した際にアラートを表示」という感じです。

ですが、jQueryがうまく動作しないのでアラートが表示できなくて困っています。
おそらく、ajaxの表記方法がおかしいと思うのですが、うまくインポートする方法を教えていただきたいです。

以下、抜粋プログラムです。

該当のソースコード

userRepository.java

package jp.co.internous.ecsite.model.dao;

public interface UserRepository extends JpaRepository<User, Long> {
		
	@Query(value = "SELECT COUNT(id) FROM user WHRER user_name = ?", nativeQuery = true)
	int countByUserName(@Param("userName") String userName);
	
}

IndexController.java

package jp.co.internous.ecsite.controller;

	@ResponseBody
	@PostMapping("api/userName")
	public boolean isDupError(@RequestBody SingUp singup) {
		int count = userRepos.countByUserName(singup.getUserName());
		return count > 0;
	}
}

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<meta charset="UTF-8">
5<title>ECサイト</title>
6<link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
7<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
8<script>
9
10$(() => {
11	$('#userName').blur(function() {
12		let user = $('#userName');
13		$.ajax({
14			 url: '/ecsite/api/userName',
15	         type: 'POST',
16	         data: {
17	 			"userName": user.val()
18			}
19		})
20		.then((result) => {
21			if (result) {
22				alert('ユーザー名が存在するため使用できません。');
23			} 
24		}, () => {
25			alert('Error: ajax connection failed.');
26		});
27	});
28	
29});
30</script>
31</head>
32<body>
33	
34<header>
35	<h1>My EC Site -- SingUp page</h1>
36</header>
37	
38<div id="singUp">
39	<h2>新規ユーザー登録</h2>
40
41	<form name="addSingUp" id="addSingUp" method="post" 
42		action="/ecsite/addSingup" th:action="@{/ecsite/addSingup}">
43	<p>ユーザー名:<input type="text" name="userName" id="userName" /></p>
44		
45	<p>パスワード :<input type="password" name="password" id="password" /></p>
46		
47	<p>フルネーム :<input type="text" name="fullName" id="fullName" /></p>
48	<button type="button" id="registerButton">新規登録</button>
49	</form>
50</div>
51</body>
52</html>

m.ts10806

2020/09/15 08:11

>うまくインポートこの「インポート」はどういう意味で使っていますか？あと、本件とはあまり関係ないですが、jQueryは実質3系以外は使わない方が良いかと思います(あくまで古いブラウザへの対応用のため)

ktktktkt

2020/09/15 08:16

うまく機能しないでした！ jQueryは実質3系以外は使わない方が良いと言うのはどうゆう意味でしょうか？他の方法で行った方が良いのでしょうか？

m.ts10806

2020/09/15 09:53

質問は編集できますので適宜調整してください。 >jQueryは実質3系以外は使わない方が良いと言うのはどうゆう意味でしょうか？コードを見る限り2.2.2なので2系を使われています。なぜ避けるべきかは既に書いたとおりあくまで古いブラウザ対応のため。つまり、3系を利用すれば良いです

m.ts10806

2020/09/15 09:58

あと、jQueryのリンクはプロトコル省略の//から始まるものではなくCDNをコピーしてきた方が良いと思います。https://code.jquery.com/

m.ts10806

2020/09/15 09:59

あと、ブラウザ開発ツールのコンソール確認してください。JavaScriptのエラー確認です。確認結果は質問本文に追記してください

行動規範の内容に同意します

回答1件

Ajaxで実装されているURLのパスに誤りはないでしょうか？
特にコンテキストパスの誤りはよくある事象なのと、Controllerのパス設定は正しく行うべきです。

以下も参照してください。

ThymeleafでJavaScriptを利用する

また、AjaxでJSONの結果を受け取りたい場合は、Controllerの実装はもう少し簡単にできます。

java
1import org.springframework.web.bind.annotation.PostMapping;
2import org.springframework.web.bind.annotation.RequestMapping;
3import org.springframework.web.bind.annotation.RestController;
4
5@RestController
6@RequestMapping("/api/userName")
7public class SampleApiController {
8	@PostMapping
9	public boolean duplicated(.....) {
10
11	}
12}
13

投稿2020/09/15 08:36

A-pZ

総合スコア12011

ktktktkt

2020/09/15 08:53

urlを確認したのですが、大丈夫でした！ controllerの実装方法、参考資料は今後参考にさせて頂きます！因みに、ajaxの実装方法は変だったりするでしょうか？質問ばかりで申し訳ないのですがご確認していただければ幸いです！

A-pZ

2020/09/15 09:04

動作させてみた感じでは、URLさえ合っていればControllerとの送受信部分があっているなら、Ajax部分は正しく動作しています。SpringBootのアプリケーションをデバッグモードで起動して、Controllerへリクエストが届いているかを確認するため、ブレークポイントを当該Controllerにつけて動作させてみると良いかもしれません。

ktktktkt

2020/09/16 08:12

デバックモードで確認したのですが、ブレークポイントで止まらずにコンソール上にはリクエストが表示されませんでした！そもそも、controllerのメソッド自体がおかしいのでしょうか？

行動規範の内容に同意します