Q&A
コントローラのコードもご提示ください
前提・実現したいこと
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の再確認
回答2件
0
コントローラはPOSTで待ち受けていますが、JavaScriptは指定がないのでデフォルトのGETでリクエスト投げています。
なお、POSTだけのリクエストはマッピングできないので、RequestMappingのmethod自体をなくしたほうが良いように思います。あとはGETのときはエラー返すようにするとか、そこは要件次第で。
投稿2020/09/15 07:16
総合スコア80875
0
ベストアンサー
formで送信している箇所を見ると、
<form th:action="@{/pizza/customeradd}" method="post">送信しているURLに対して、Controllerの実装がありませんが、この場合、/pizza/customeradd に対して POSTを受け取るようにしなければ動作しません。
なお、@RequestMapping でHTTPメソッドを指定せずとも、今は @PostMapping が使えます。
投稿2020/09/15 06:39
編集2020/09/17 12:43
総合スコア12011
@RequestMapping(value = "/pizza/customer", method = RequestMethod.POST)
この部分をGETに変更すると、
Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported]
のエラーが発生してしまいます。他に方法があるのでしょうか？
ご回答ありがとうございます。$.ajaxでの接続テストはうまくいきませんでしたが、その処理を無くしてonKeyUpのaddr11という名前を変更した所うまく動作しました。
あなたの回答
tips
プレビュー
