【SpringBoot】@Controllerに対してajax通信を行うがコントローラクラスの該当メソッドに処理が移行しない

■解決したいこと
@Controllerを付与したコントローラクラスのメソッドに対してajax通信のgetリクエストを行うが
該当のメソッドが実行されない
(※デバッグで確認済み)

■行った手順
・コントローラクラスの作成
・@RequestMappingで受け取るURLを設定する
・javascriptファイル内でコントローラクラス内のメソッドに対しgetリクエストを行うよう記述
(testPageController)

package com.example.demo.web.sample.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@RequestMapping(value = "/sample")
@Controller
public class TestPageController {
	
	@RequestMapping(value = "/test2")
	public String getPage2() {
		return "成功しました";
	}
}

(test.js)

$(function() {
	
　$.get('http://localhost:8080/sample/sample/test2')
　　.done(function(data) {
    	alert(data);
    	});
})

(test.html)※

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript" th:src="@{/js/sample/test.js}"></script>

</head>
<body>
	<p>テスト</p>
</body>
</html>

※cssファイルはなし

■試したこと
1 URLがマッピングされていない？
→URLを直接ブラウザに入力すると該当のメソッドにリクエストが送られることを確認(デバッグモードで確認)

2 jsファイルは動いている？
→chromの開発ツールを使って確認。$.getの処理が実行されていることは確認されたが、.doneには処理が移行していないためサーバ側へのリクエストが失敗していると考えられる

3　@RequestMappingのconsumesを使って、Content-Typeを明示してみる
→AjaxリクエストのAcceptヘッダの確認方法が分からず未実施

yushi_koga

2021/05/02 14:41 編集

過去に関連している質問をされているようですね。元の質問を編集するか、過去にこの質問に関連した質問をしたことがあることを明示したほうが良いと思いますよ https://teratail.com/questions/336189 でなければ、低評価がついてしまうかと思います。

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

回答1件

1 URLがマッピングされていない？
→URLを直接ブラウザに入力すると該当のメソッドにリクエストが送られることを確認(デバッグモードで確認)

この書き方だと、エントリポイントはhttp://localhost:8080/sample/sample/test2ではなくhttp://localhost:8080/sample/test2になるはずです。
仮にhttp://localhost:8080/sample/sample/test2で動作しているのであれば、tomcatのcontext pathの設定を入れている（入れてしまっている）と思われます。
application.propertiesあるいはapplication.ymlといった設定ファイルでserver.servlet.context-path=/sampleと設定してしまっていないか確認したほうが良いでしょう。

また、TestPageController#getPage2のreturnの値からplain/textな返り値を返すことを期待して書いていると推測しましたが、その場合は@Controllerではなく@RestControllerを使うのが一般的です。
仮にこの書き方のまま@Controllerを使う場合は、返したい内容を記載した成功しました.htmlをresources/templates配下に配置するか、メソッドに@ResponseBodyを付与する必要があります。

2 jsファイルは動いている？
→chromの開発ツールを使って確認。$.getの処理が実行されていることは確認されたが、.doneには処理が移行していないためサーバ側へのリクエストが失敗していると考えられる

.doneには処理が移行していないサーバ側へのリクエストが失敗していると考えられるとされていますが、どのような手段で確認されたにせよ、サーバとの通信状況を確認するのには開発ツールのネットワークタブが最適かと思います。
ここで、サーバからどのような応答が返ってきているかを確認するのが最も効率的です。
ちなみに$.getが実行されていると判断した理由はなんでしょうか？

3　@RequestMappingのconsumesを使って、Content-Typeを明示してみる
→AjaxリクエストのAcceptヘッダの確認方法が分からず未実施

今回の書き方に関しては、ここは特に関係ありません。

以上のことを踏まえて、現時点(2021/05/02)で最もSpring Bootらしい書き方に変更する修正内容は以下となります。

@Controllerとしている部分を@RestControllerに変更する
context pathの設定を削除する
$.get('http://localhost:8080/sample/sample/test2')としている部分を$.get('http://localhost:8080/sample/test2')に変更する。

投稿2021/05/02 14:26

yushi_koga

総合スコア10