

# 概要

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

[code]

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

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

[code]

    <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>
    
[/code]

JavaScript

[code]

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

# 補足

Google Chromeのディベロッパーツールコンソールで上記jsのdataの中身を出力したところ以下のようになっています。

[code]

    　<div id="bankSelectFragment">
    
                            </div>
    
[/code]


CC BY-SA 4.0
2020-09-01T08:15:50.880
70041
2020-09-01T10:37:14.863
2020-09-01T10:37:14.863
3060
41726
question
javascript java ajax spring-boot
Spring boot+Thymeleafで画面を一部更新したい