Bdtjtk

I'm having a simple rest controller which returns a string based on the params that it gets.My problem is that i'm trying to append the returned type to the page and my page basically gets updated with that returned type but it doesn't append the message to the page where the request was consumed.
The Controller:

@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;

}

The form:

<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);

              }

            });

     }

})

After the form is submitted the page looks like this:

But i need to append this message to the page were the form was submitted:( Why is this happening?

The javascript onclick handler you have on the submit button will get called, but you don't prevent the default behavior of the submit button which is to submit the form to the url specified by the action. Assuming you just want the javascript to handle it you could try changing the submit button to just a button

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

and/or change your click handler to prevent the default action:

 $('.sendButton').click(function(event){

     ajaxPost();

     event.preventDefault();

 });