概要
Sprint bootでWebアプリの開発をしています。
画面内でユーザがボタンをクリックすると、クリックしたボタンに応じて画面を一部更新させたく、ajaxとthymeleafのfragmentを活用してみたところ、コントローラからレスポンスは返ってきているものの、エラーになってしまいます。
エラーの詳細
Google Chromeのディベロッパーツールのコンソールを見たところ、ajaxでレスポンスを受け取ったあとに以下のようにPOSTしているようで、コントローラ側ではPOSTに対応したメソッドが無いためエラーになっているようです。
/test/input
にアクセス- ボタンクリックでURLを
/test/index/btn
としてajax通信 - 通信後に
/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>