javascriptでサーバーにrequestをしてspringのコントローラーのメソッドを動かすにはどうしたらいいのでしょうか？

javascriptでhttp://localhost:8080/project1/registered_checkにrequestを送っても
下記のメソッドを動かすことができませんでした。
./registered_checkにrequestを送ってもだめでした。
どこが悪いのでしょうか？

■github
https://github.com/yukikoike/project1

java
1    @RequestMapping("registered_check")
2    boolean registeredCheck(@RequestParam("inputEmailAddress") String inputEmailAddress) {
3        user.setEmailAddress(inputEmailAddress);
4        return registeredCheck.registeredCheck(user);

↓問題解決後に編集

java
1package com.koikeya.project1.app.controller;
2
3import javax.validation.Valid;
4
5import org.slf4j.Logger;
6import org.slf4j.LoggerFactory;
7import org.springframework.beans.factory.annotation.Autowired;
8import org.springframework.stereotype.Controller;
9import org.springframework.validation.BindingResult;
10import org.springframework.web.bind.annotation.ModelAttribute;
11import org.springframework.web.bind.annotation.RequestMapping;
12import org.springframework.web.bind.annotation.RequestParam;
13import org.springframework.web.bind.annotation.ResponseBody;
14
15import com.koikeya.project1.app.form.UserForm;
16import com.koikeya.project1.domain.model.User;
17import com.koikeya.project1.domain.service.RegisteredCheck;
18
19/**
20 * 会員登録処理コントローラークラス
21 *
22 * @author user
23 *
24 */
25@Controller
26public class SignUpProcessController {
27
28    /**
29     * ロガー
30     */
31    Logger logger = LoggerFactory.getLogger(SignUpProcessController.class);
32
33    /**
34     * メールアドレス登録済みチェックオブジェクト
35     */
36    @Autowired
37    RegisteredCheck registeredCheck;
38
39    /**
40     * ユーザーオブジェクト
41     */
42    @Autowired
43    User user;
44
45
46    /**
47     * 登録済みチェックをする
48     *
49     * @param inputEmailAddress 入力したメールアドレス
50     * @return 真偽
51     */
52    @RequestMapping("registered_check")
53    @ResponseBody
54    boolean registeredCheck(@RequestParam("emailAddress") String emailAddress) {
55        logger.info("成功");
56        user.setEmailAddress(emailAddress);
57        return registeredCheck.registeredCheck(user);
58    }
59
60    /**
61     * 会員登録確認画面へ遷移する
62     *
63     * @param userForm ユーザーフォームオブジェクト
64     * @param result バリデーションの結果
65     * @return 会員登録確認画面のパス
66     */
67    @RequestMapping("sign_up_process")
68    String signUpProcess(@Valid @ModelAttribute("userForm") UserForm userForm, BindingResult result) {
69        logger.info("Entered");
70        if (result.hasErrors()) {
71            return "sign_up";
72        }
73        return "sign_up_confirm";
74    }
75}
76

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
4<head>
5<meta charset="UTF-8">
6<title>project1</title>
7<link href = "./css/style.css" th:href="@{./css/style.css}" rel="stylesheet" />
8<link rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.min.css" />
9<script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
10</head>
11<body>
12  <div id="page">
13    <div th:include="./commons/header.html::header"></div>
14    <!--<header th:fragment="header">-->
15    <!--</header>-->
16    <form th:action="@{./login_index}" method="get" sec:authorize="isAnonymous()" th:with="page=${#request.queryString}">
17      <button>会員登録</button>
18    </form>
19    <!-- 「th:with」でローカル変数を定義できる -->
20    <div th:with="page=${page}">
21      <!-- 画面幅がMiduim以上のときはグリッドを4個持つカラムを生成する TODO 「Bootstrap 4 フロントエンド開発の教科書」を読み直す-->
22      <div class="col-md-12">
23        <form role="form" action="./sign_up_process" th:action="@{./sign_up_process}" th:object="${userForm}" method="post">
24          <!-- id -->
25<!--           <div class="form-group"> -->
26<!--             <label class="control-label" for="inputId"><abbr title="required">*</abbr> ID</label> -->
27<!--             「*{id}」でuserForm.idに値を代入することができる -->
28<!--             <input type="text" class="form-control" id="inputId" name="id" th:field="*{id}" /> -->
29<!--             idにエラーがあればerror!が表示される -->
30<!--             <span th:if="${#fields.hasErrors('id')}" th:errors="*{id}" class="help-block">error!</span> -->
31<!--           </div> -->
32          <!-- select roleId -->
33          <div class="form-group">
34            <label class="control-label" for="inputSelect">Select</label>
35            <select class="form-control" id="inputSelect" name="selectRole">
36              <option value="">---</option>
37              <option th:each="role : ${selectRole}" th:value="${role.value}" th:text="${role.key}" th:selected="${role.value} == *{roleId}">pulldown</option>
38            </select>
39            <span th:if="${#fields.hasErrors('roleId')}" th:errors="*{roleId}" class="help-block">error!</span>
40          </div>
41          <!-- date type text -->
42<!--           <div class="form-group"> -->
43<!--             <label class="control-label" for="inputRoleId"><abbr title="required">*</abbr> 権限ID</label> -->
44<!--             <input type="text" class="form-control" id="inputRoleId" name="roleId" th:field="*{roleId}" /> -->
45<!--             <span th:if="${#fields.hasErrors('roleId')}" th:errors="*{roleId}" class="help-block">error!</span> -->
46<!--           </div> -->
47          <!-- date -->
48          <div class="form-group">
49            <label class="control-label" for="inputLastName"><abbr title="required">*</abbr> 姓</label>
50            <input type="text" class="form-control" id="inputLastName" name="lastName" th:field="*{lastName}" />
51            <span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}" class="help-block">error!</span>
52          </div>
53          <!-- number type text -->
54          <div class="form-group">
55            <label class="control-label" for="inputFirstName"><abbr title="required">*</abbr> 名</label>
56            <input type="text" class="form-control" id="inputFirstName" name="firstName" th:field="*{firstName}" />
57            <span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}" class="help-block">error!</span>
58          </div>
59          <!-- number -->
60          <div class="form-group">
61            <label class="control-label" for="inputDateOfBirth"><abbr title="required">*</abbr> 生年月日</label>
62            <input type="text" class="form-control" id="inputDateOfBirth" name="dateOfBirth" th:field="*{dateOfBirth}" />
63            <span th:if="${#fields.hasErrors('dateOfBirth')}" th:errors="*{dateOfBirth}" class="help-block">error!</span>
64          </div>
65          <!-- email -->
66          <div class="form-group">
67            <label class="control-label" for="inputEmailAddress"><abbr title="required">*</abbr> Email address</label>
68            <input type="email" class="form-control" id="inputEmailAddress" name="emailAddress" th:field="*{emailAddress}" />
69            <span th:if="${#fields.hasErrors('emailAddress')}" th:errors="*{emailAddress}" class="help-block">error!</span>
70          </div>
71          <!-- email confirm -->
72          <div class="form-group">
73            <label class="control-label" for="inputEmailAddressConfirm"><abbr title="required">*</abbr> Email address confirm</label>
74            <input type="email" class="form-control" id="inputEmailAddressConfirm" name="emailAddress" th:field="*{emailAddress}" />
75            <span th:if="${#fields.hasErrors('emailAddress')}" th:errors="*{emailAddress}" class="help-block">error!</span>
76          </div>
77          <!-- password -->
78          <div class="form-group">
79            <label class="control-label" for="inputPassword"><abbr title="required">*</abbr> Password</label>
80            <input type="password" class="form-control" id="inputPassword" name="password" th:field="*{password}" />
81            <span th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="help-block">error!</span>
82          </div>
83          <!-- password confirm-->
84          <div class="form-group">
85            <label class="control-label" for="inputPasswordConfirm"><abbr title="required">*</abbr> Password confirm</label>
86            <input type="password" class="form-control" id="inputPasswordConfirm" name="password" th:field="*{password}" />
87            <span th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="help-block">error!</span>
88          </div>
89          <button type="submit" id="submit" class="btn btn-default">confirm</button>
90        </form>
91      </div>
92    </div>
93    <!--<footer th:fragment="footer">-->
94    <div th:replace="./commons/footer.html::footer"></div>
95    <!--</footer>-->
96  </div>
97  <script type="text/javascript" src="./js/sign_up.js"></script>
98</body>
99</html>
100

↓問題解決後に編集

javascript
1'use strict';
2window.onload = function() {
3  var submit = document.getElementById('submit');
4
5  console.log(submit);
6  if (submit == null) {
7    submit = document.getElementById('submit');
8  }
9  console.log(submit);
10  submit.addEventListener('click', () => {
11    var inputEmailAddress = document.getElementById('inputEmailAddress').value;
12    var inputEmailAddressConfirm = document.getElementById('inputEmailAddressConfirm').value;
13    var inputPassword = document.getElementById('inputPassword').value;
14    var inputPasswordConfirm = document.getElementById('inputPasswordConfirm').value;
15    console.log('デバッグ中2');
16
17    if (inputEmailAddress != inputEmailAddressConfirm) {
18        event.preventDefault();
19        alert('メールアドレスが一致しません。');
20      } else if (inputPassword != inputPasswordConfirm) {
21        event.preventDefault();
22        alert('パスワードが一致しません。');
23      }
24      var request = new XMLHttpRequest();
25      request.open('GET', 'http://localhost:8080/project1/registered_check?emailAddress=' + inputEmailAddress, false);
26      console.log(inputEmailAddress)
27      if (request.responseText === 'true') {
28        event.preventDefault();
29        alert('メールアドレスが登録されているため登録できません。');
30      }
31      console.log(request.responseText);
32        // // TODO サーバーからのレスポンスでメールアドレスが登録済みだったらポップアップを表示して、画面遷移を中止
33  })}
34
35
36

A-pZ

2019/12/10 04:07

registered_check の Controller を抜粋せず、全量を記載しましょう。たいていは設定不足です。

yuki1111

2019/12/10 12:58

ありがとうございます。なんとか自分で解決できました。

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

回答1件

自己解決

javascript
1      request.open('GET', 'http://localhost:8080/project1/registered_check?emailAddress=' + inputEmailAddress, false);

↑でリクエストを送り、
↓で受けとればOK

java
1    @RequestMapping("registered_check")
2    @ResponseBody
3    boolean registeredCheck(@RequestParam("emailAddress") String emailAddress) {
4

投稿2019/12/10 13:04

yuki1111

総合スコア73

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問