0

概要

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

エラーの詳細

Google Chromeのディベロッパーツールのコンソールを見たところ、ajaxでレスポンスを受け取ったあとに以下のようにPOSTしているようで、コントローラ側ではPOSTに対応したメソッドが無いためエラーになっているようです。

  1. /test/inputにアクセス
  2. ボタンクリックでURLを/test/index/btnとしてajax通信
  3. 通信後に/test/inputに対してPOSTしている。

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

ソースコード

Java

(省略※/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";
}

HTML
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>

JavaScript

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>
2

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。