Как использовать теги SpringMVC Form вместе с AJAX - PullRequest
Новая
       37

Как использовать теги SpringMVC Form вместе с AJAX

0 голосов
/ 19 февраля 2019

Предположим, у меня есть объект входа в систему, когда я делаю запрос на получение имени для входа в систему, я отправляю объект входа в систему и на странице JSP я использую атрибут модели и пути для сопоставления атрибутов следующим образом:

ViewController: 

    @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, это было бы возможно?

Есть ли способ использовать функциональность атрибута модели, а также отправлять запросы AJAX?

1 Ответ

0 голосов
/ 21 февраля 2019

После получения подробностей о том же, я наконец-то нашел решение!

Мне пришлось внести следующие изменения.

Login.jsp - добавить новый тег кнопки вне тега

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