如何将 Spring MVC 表单标签与 AJAX 一起使用答案

【问题标题】：How to use SpringMVC Form tags along with AJAX如何将 Spring MVC 表单标签与 AJAX 一起使用
【发布时间】：2019-07-13 05:52:20
【问题描述】：

假设我有一个登录对象，当我发出“登录”的获取请求时，我发送登录对象并在 JSP 页面中使用模型属性和路径来映射属性，如下所示：

视图控制器：

    @GetMapping("/login")
    public String login(Model model){
       Login login = new Login();
       model.addAttribute("login",login);
       return "login";
    }

JSP 页面：

 ...

<form:form action="login" method="post" modelAttribute="login">
        <form:hidden path="id"/>
        <label for="username">UserName</label>
        <form:input path="username"/><br>
        <label for="password">Password</label>
        <form:password path="password"/><br>
        <form:button>Login</form:button>
</form:form>
...

现在，当我点击登录按钮时，登录对象被发送到适当的控制器，并相应地返回一个带有一些消息的 ResponseEntity 对象。处理完成后，页面刷新并显示 ResponseEntity 对象中的消息，说“登录成功”。

但我想以警报的形式显示此消息。为此，我必须发出 AJAX 请求，并在成功后使用消息调用警报，但在这种方法中，我不能再使用 modelAttribute 并且 AJAX 已经发送了一个 Login 对象，这可能吗？

有什么方法可以使用 modelAttribute 的功能并发出 AJAX 请求吗？

【问题讨论】：

标签： java ajax spring-mvc jsp modelattribute

【解决方案1】：

在挖掘了相同的细节之后，我终于得到了解决方案！

我必须进行以下更改。

  ...
    <form:form id="myform" action="login" method="post" modelAttribute="login">
        <form:hidden path="id"/>
        <label for="username">UserName</label>
        <form:input path="username"/><br>
        <label for="password">Password</label>
        <form:password path="password"/><br>
    </form:form>
    <button id="login-btn">Login</button>
  ...

AJAX 脚本：

       $(document).ready(function () {
           $("#login-btn").click(function () {
               $.ajax({
                   type: "POST",
                   url: "login",
                   data : $("#myform").serialize(),
                   success: function (data) {
                       alert(data);
                   },
                   error: function(data){
                       alert(data);
                  }
               });
           }) 
        });

控制器：（检查登录是否有效）

@PostMapping("/login")
    public ResponseEntity<?> login(@ModelAttribute("login") Login login){
        boolean status = loginDao.isValidLogin(login);
        String message = (status)?"Login Succcessful":"Incorrect Login Credentials!";
        return new ResponseEntity<>(message,HttpStatus.OK);
    }

【讨论】：