Spring Boot Jquery Controller Json не добавляется на страницу

Question

У меня простой контроллер rest, который возвращает строку на основе полученных параметров. Моя проблема в том, что я пытаюсь добавить возвращаемый тип на страницу, и моя страница в основном обновляется с этим возвращаемым типом, носообщение не добавляется на страницу, где был обработан запрос.Контроллер:

@RequestMapping(value = "/send", method = RequestMethod.GET)
@ResponseBody
public String sendMoney(@RequestParam String email, @RequestParam int money) {
    User user = userRepository.findByEmail(email);
    Authentication auth = SecurityContextHolder.getContext().getAuthentication();
    User loggedInUser = userRepository.findByEmail(auth.getName());
    int totalUserMoney = loggedInUser.getTotalMoney();

    if(money < 1) {
        return "You can't send 0 money";
    }
    if(user == null) {
        return "This user doesn't exist!";
    }
    if(user != null && money >=1) {
        if(money > totalUserMoney) {
            return "You can't send that much money";
        }else {
            user.setTotalMoney(user.getTotalMoney() + money);
            userRepository.save(user);
            return "Money sent successfully";
        }
    }
    return null;
}

Форма:

<h3 th:text="'Your current balance is: ' + ${money}"></h3>
    <form th:action="@{/send}" METHOD = GET>
      User:<br>
      <input id="email" type="text" name="email">
      <br>
      Amount of Money To Send:<br>
      <input id="money" type="text" name="money">
      <br><br>
      <input class="sendButton" type="submit" value="Submit">
    </form>
    <div id = "response"></div>
    <script src="js/ajaxPost.js"></script>

Jquery:

$( document ).ready(function() {
    $('.sendButton').click(function(){
        ajaxPost();
    });

     function ajaxPost(){
         $.ajax({
              type: "GET",
              url: "/send",
              dataType: "json",
              data: { 
                  'email': $('#email').val(),
                  'money': $('#money').val(),
              },
              success: function(response) {
                $('#response').append('<h3>' + response + '</h3>');
                console.log(response);
              },
              error: function(xhr) {
                console.log(xhr);
              }
            });
     }
})

После отправки формы страница выглядит следующим образом:

Но мне нужно добавить это сообщение на страницу, где была отправлена ​​форма :( Почему это происходит?

Answer 1

Будет вызван обработчик javascript onclick, который вы используете для кнопки отправки, но вы не помешаете стандартному поведению кнопки отправки, которая заключается в отправке формы по URL-адресу, указанному в действии.Предполагая, что вы просто хотите, чтобы JavaScript обрабатывал его, вы можете попробовать изменить кнопку отправки на просто кнопку

 <input class="sendButton" type="button">Submit</input>

и / или изменить свой обработчик кликов, чтобы предотвратить действие по умолчанию:

 $('.sendButton').click(function(event){
     ajaxPost();
     event.preventDefault();
 });