在 Spring MVC 项目的 Bootstrap 模式中显示错误消息

Question

是否可以通过控制器在 Spring MVC 项目的 Bootstrap 模态中显示 "User with this username does not exist" 错误消息？

login.jsp

<div class="modal-body">
<form id="register-form" role="form" autocomplete="off" class="form"
    method="POST"
    action="${pageContext.request.contextPath }/recoverPassword">

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i
                class="glyphicon glyphicon-envelope color-blue"></i></span> <input
                id="email" name="username" placeholder="your username"
                class="form-control" type="text"> ${error}
        </div>
    </div>
    <input type="hidden" name="${_csrf.parameterName}"
        value="${_csrf.token}" />
    <button class="btn btn-lg btn-primary btn-block" type="submit">
        Send email link</button>

</form>

控制器

@RequestMapping(value = "/recoverPassword", method = RequestMethod.POST)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void sendingEmailForForgot(@RequestParam("username") String username) {

    // Check whether email exists in DB
    System.out.println(userDAO.getUserByName(username));
    System.out.println(username);
    if (userDAO.getUserByName(username) == null) {

        System.out.println("This ID does not exists");
        redirectAttributes.addAttribute("error", "wrong");

    } else {
        System.out.println("mail sent to your id");
    }

    // If exists then hash and send url link
    // else error

}

我已经验证了用户名是否存在，但是如何在当前打开的同一个模式上显示该错误？

如果无法通过控制器实现，请分享任何其他方式。

Answer 1

终于通过AJAX解决了，还是不知道能不能通过controller解决。对我来说很好用，我用过这个：

function doAjaxPost() {
    // get the form values
    var name = $('#name').val();
    var education = $('#education').val();

    $.ajax({
        type: "POST",
        url: contexPath + "/AddUser.htm",
        data: "name=" + name + "&education=" + education,
        success: function(response){
            // we have the response
            if(response.status == "SUCCESS"){
                userInfo = "<ol>";
                for(i =0 ; i < response.result.length ; i++){
                    userInfo += "<br><li><b>Name</b> : " + response.result[i].name +
                    ";<b> Education</b> : " + response.result[i].education;
                 }
                 userInfo += "</ol>";
                 $('#info').html("User has been added to the list successfully. " + userInfo);
                 $('#name').val('');
                 $('#education').val('');
                 $('#error').hide('slow');
                 $('#info').show('slow');
             }else{
                 errorInfo = "";
                 for(i =0 ; i < response.result.length ; i++){
                     errorInfo += "<br>" + (i + 1) +". " + response.result[i].code;
                 }
                 $('#error').html("Please correct following errors: " + errorInfo);
                 $('#info').hide('slow');
                 $('#error').show('slow');
             }
         },
         error: function(e){
             alert('Error: ' + e);
         }
    });
}

Answer 2

以下技巧对我有用 1. 将 ${error} 放入具有唯一 ID 的 p 标签中 2. 在 login.jsp 页面加载时，检查 p 标签的 innerHtml 是否为空。 3 如果不为空，打开登录模式。

function modelopen(){
var temp = document.getElementById("errormsg").innerHTML;
  if(temp!==""){
    $('#modallogin').modal('show');
}

Answer 3

你可以试试： 1) RestController 而不是 Controller（我认为这是你解决这个问题的方法）
2) 您可以使用验证和 return 您的错误作为 BindingResult https://docs.spring.io/spring/docs/4.1.x/spring-framework-reference/html/validation.html 的一部分 3) 使用异常处理程序

Answer 4

function errorshow() {
const input1 = document.getElementById('input1').value;
const input2 = document.getElementById('input2').value;
const div = document.getElementById("erroM");
if (input1 == '' && input2 == '') {
   div.innerHTML = "hey";
   setTimeout(() => {
    div.remove()}, 2000);
 }}

<!doctype html>
<html lang="en">

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous">
             <title>Erorr Show in Modal</title>
    </head>

    <body>
        

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>
                <div class="modal-body">
                    <div id="erroM"></div>
                    <div>
                        <input id="input1" type="text">
                        <input id="input2" type="text">
                        <input id="input3" type="text">
                    </div>
                
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="errorshow()">save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Button trigger modal -->
<button id="button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Click</button>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

        <script src="main.js"></script>
    </body>

</html>

在 Spring MVC 项目的 Bootstrap 模式中显示错误消息

Displaying Error Message in Bootstrap Modal in Spring MVC Project

spring-mvc

bootstrap-modal

display