Spring boot+Thymeleafで画面を一部更新したい

Question

概要

Sprint bootでWebアプリの開発をしています。
画面内でユーザがボタンをクリックすると、クリックしたボタンに応じて画面を一部更新させたく、
ajaxとthymeleafのfragmentを活用してみたところ、コントローラからレスポンスは返ってきているものの、
エラーになってしまいます。

発生している問題・エラーメッセージ

Google Chromeのディベロッパーツールのコンソールを見たところ、ajaxでレスポンスを受け取ったあとに以下のようにPOSTしているようで、
コントローラ側ではPOSTに対応したメソッドが無いためエラーになっているようです。
①/test/inputにアクセス
②ボタンクリックでURLを「/test/index/btn」としてajax通信
③通信後に/test/inputに対してPOSTしている。

なぜ、POSTが走ってしまうのでしょうか。
書き方に誤りがあれば、ご教示いただけますでしょうか。

2020-09-01 16:46:06.335  WARN 14528 --- [nio-8080-exec-5] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported]

該当のソースコード

(省略※/test/inputへのGET用メソッドがあります）
	@RequestMapping(value = "test/input/btn", method = RequestMethod.GET)
	public String bankDirectBtn(Model model, @RequestParam(value = "num")String num) {

		model.addAttribute("num", num);

		return test/input + " :: testFragment";
	}

numの値がある場合、ボタンを表示せず、numの値を表示させます。

（省略）
<div id="testFragment" th:fragment="testFragment">
 <table class="testBtnArea" th:if="${#strings.isEmpty(num)}">
  <tr>
    <td><button id="test001" class="testBtn" onclick="testBtn('001')">テスト1</button></td>
    <td><button id="test002" class="testBtn" onclick="testBtn('002')">テスト2</button></td>
    <td><button id="test003" class="testBtn" onclick="testBtn('003')">テスト3</button></td>
  </tr>
 </table>
 <p th:if="${not #strings.isEmpty(num)} th:text="${num}" />
</div>

function testBtn(num) {
	   $.ajax({
           url: '/test/input/btn',
           type: 'get',
           data: {
               num: #num
           },
           success: function (data) {
               $('#testFragment').html(data);
           }
       });
	}

試したこと

Google Chromeのディベロッパーツールで上記jsのdataを出力させたところ、以下のようになっておりました。

　<div id="bankSelectFragment">
						
						</div>

Comments

[m.ts10806]

JavaScriptのbankDirectBtn()はどこで実行されているのでしょうか。

[Matsukubo]

失礼いたしました。JSの関数名が誤っておりましたので、修正いたしました。htmlのonclick="testBtn('001')"で実行される想定です。

Answer 1

buttonタグは、typeを指定しないとデフォルトでは type="submit" になるので、
そのあたりではないでしょうか。
<button type="button" 〜> のようにtype="button" を指定してみるとうまく行くかもしれません。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

Comments

[Matsukubo]

type="button"にしたところ、想定どおり動作いたしました！タグについて勉強不足でした。ありがとうございます！

[m.ts10806]

送信しないformタグは設置しない方が良いですね。