时间戳

首页 > 解决方案 > Spring Boot Jquery Controller Json 不会附加到页面

jquery - Spring Boot Jquery Controller Json 不会附加到页面

问题描述

我有一个简单的休息控制器，它根据它获得的参数返回一个字符串。我的问题是我试图将返回的类型附加到页面，我的页面基本上用返回的类型更新，但它没有t 将消息附加到使用请求的页面。控制器：

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

查询：

$( 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);
              }
            });
     }
})

提交表单后，页面如下所示： 在此处输入图像描述

但是我需要在提交表单后将此消息附加到页面:(为什么会这样？

标签： jqueryspringrestspring-bootcontroller

解决方案

您在提交按钮上的 javascript onclick 处理程序将被调用，但您不会阻止提交按钮的默认行为，即将表单提交到操作指定的 url。假设您只希望 javascript 处理它，您可以尝试将提交按钮更改为一个按钮

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

和/或更改您的点击处理程序以防止默认操作：

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

推荐阅读