Spring Boot + Thymeleaf Ajaxが読み込めない

新規登録

前提・実現したいこと

Ajaxを利用して郵便番号から住所を自動入力する処理をしたいと考えています

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

以下のエラーが発生します。

Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported]

jquery.min.js:2 GET http://localhost:8080/pizza/customer 405
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ customer:12

Controller

	@RequestMapping(value = "/pizza/customer", method = RequestMethod.POST)
	public String findCustomer(Model model, @RequestParam((String) "phone") String phone,@Validated(Shop.class) Shop shop) {

		if(pizzaService.find(phone) != null) {//電話番号が見つかったら注文画面に進む
			Customer customer = pizzaService.find(phone);
			List<Product> products = pizzaService.findProducts();//商品リストを抽出

			model.addAttribute("customer",customer);
			model.addAttribute("orderRequest", new OrderRequest());
			model.addAttribute("products", products);//商品リストをadd

			return "/pizza/orderproduct";
		}else {//見つからなかったら新規登録をする
			CustomerCreateRequest createRequest = new CustomerCreateRequest();//顧客情報登録フォームをnewする
			createRequest.setShopId(shop.getShopId());//どの店舗の顧客なのかshopIdをセットして判断する

			model.addAttribute("createRequest",createRequest);//createcustomer.htmlににaddする
			return "/pizza/createcustomer";
		}

	}

htmlファイル

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
	<script
	 th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"
	 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script>
	<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
<title>新規登録</title>
<meta charset="utf-8" />
<script>
$.ajax({
     success : function(response){
         alert('成功');
     },
     error: function(){
         //通信失敗時の処理
         alert('通信失敗');
     }
 });
</script>
</head>
	<body>
		<h1 class="my-3">新規登録</h1>
		<form th:action="@{/pizza/customeradd}" th:object="${createRequest}" method="post">
		<table class="table table-bordered table-hover col-6">
			<tr class="form-group">
				<th class="align-middle">名前</th>
				<td><input type="text" th:field="*{name}"></td>
			</tr>
			<tr class="form-group">
				<th class="align-middle">電話番号</th>
				<td><input type="text" th:field="*{phone}"></td>
			</tr>
			<tr>
				<th class="align-middle">郵便番号</th>
				<td><input type="text" th:field="*{postalCode}" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"></td>
			</tr>
			<tr class="form-group">
				<th class="align-middle">住所</th>
				<td><input type="text" name="addr11" th:field="*{address}"></td>
			</tr>
			<tr class="form-group">
				<td><input type="hidden" th:field="*{shopId}"></td>
			</tr>
		</table>
		<div class="my-2">
		<div class="btn btn-primary"><input type="submit" value="登録" class="btn"></div>
		</div>
		</form>
	</body>
</html>

試したこと

Pathの再確認

m.ts10806

2020/09/15 06:44

コントローラのコードもご提示ください

yuu_info

2020/09/15 06:48

失礼しました。コントローラーの該当部分のコードを追記致しました。

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

回答2件

コントローラはPOSTで待ち受けていますが、JavaScriptは指定がないのでデフォルトのGETでリクエスト投げています。

なお、POSTだけのリクエストはマッピングできないので、RequestMappingのmethod自体をなくしたほうが良いように思います。あとはGETのときはエラー返すようにするとか、そこは要件次第で。

投稿2020/09/15 07:16

m.ts10806

総合スコア80890

ベストアンサー

formで送信している箇所を見ると、

送信しているURLに対して、Controllerの実装がありませんが、この場合、/pizza/customeradd に対して POSTを受け取るようにしなければ動作しません。

なお、@RequestMapping でHTTPメソッドを指定せずとも、今は @PostMapping が使えます。

投稿2020/09/15 06:39

編集2020/09/17 12:43

A-pZ

総合スコア12011

yuu_info

2020/09/15 06:50 編集

@RequestMapping(value = "/pizza/customer", method = RequestMethod.POST) この部分をGETに変更すると、 Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported] のエラーが発生してしまいます。他に方法があるのでしょうか？

yuu_info

2020/09/18 03:19

ご回答ありがとうございます。$.ajaxでの接続テストはうまくいきませんでしたが、その処理を無くしてonKeyUpのaddr11という名前を変更した所うまく動作しました。

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

あなたの回答