Spring MVC 中的警报或弹出消息框

Question

我有一个用户添加表单 userAdd.jsp。当我输入数据并提交时，我想检查输入的用户名字段与数据库相比是否唯一。在检查并确认后，我将数据插入数据库。我已经在 Spring mvc 中成功完成了这一点。
现在我想为 Spring MVC 中的两个实例提供弹出警报或对话框。 - 用户名已经在数据库中 - 用户已成功添加到数据库

以下是我的jsp视图、控制器方法和存储库方法

1. userAdd.jsp 片段

                     <div class="col-xs-4">
                     <form:input path="username" class="form-control" name="username_admin" id="username_admin" placeholder="User Name" type="text" required="required"/>
                   </div>
                   <div class="col-xs-4">
                     <form:input path="password" class="form-control" id="password1" placeholder="Password" type="text" required="required" onchange="validatePassword(password1)"/>
                   </div>
                   <div class="col-xs-4">
                     <form:input path="password" class="form-control" id="cpassword" placeholder="Password Confirm" type="text" required="required" onchange="passwordsEqual(cpassword,password1)"/>
                   </div>
   

2. 控制器方法

       //to show the userAdd.jsp page
        @RequestMapping(value="/add",method=RequestMethod.GET)
        public ModelAndView showCustomer(){
        return new ModelAndView("userAdd", "command",new User());
        }
   
   
       //to handle the form data submission and check username 
      @RequestMapping(value="/addCustomer",method = RequestMethod.POST)
      public String saveOrUpdate(@ModelAttribute("newUser")  User newUser,
                              final RedirectAttributes redirectAttributes) throws SQLIntegrityConstraintViolationException {
   
       boolean usernameUnique=staffRepository.checkUsernameUnique(newUser);
       if(usernameUnique) {
           int i = staffRepository.add(newUser);
           if (i == 0)
               //alert saying server error in inserting data to mysql
           else {
   
               //alert or dialog box confirming successful user add
           }
       }else{
           //alert saying username exists in database
       }
       return "redirect:list";
   }
   

3. 将用户数据插入数据库并检查用户名的存储库方法

     /*add a new staff member*/
      @Override
       public int add(User user) throws DuplicateKeyException {
   
       int row = 0;
   
       String un = user.getUsername();
       String pw = user.getPassword();
       String des = user.getDesignation();
       if (un != "" && pw != "" ) {
       {
   
   
               String sql = "INSERT INTO staff " +
                       "(title,username,password,first_name,last_name,email,mobile,address_line1,address_line2,address_line3," +
                       "designation,department,branch,register_date,status) VALUES (?,?,sha1(?),?,?,?,?,?,?,?,?,?,?,CURRENT_DATE,1)";
   
               row = jdbcTemplate.update(sql, new Object[]{user.getTitle(), user.getUsername(), user.getPassword(), user.getFirstName(), user.getLastName(),
                       user.getEmail(), user.getMobile(), user.getAddressL1(), user.getAddressL2(), user.getAddressL3(), user.getDesignation(),
                       user.getDepartment(), user.getBranch()});
               updateGroupStaff(des, un);
   
   
               log.info(row + " staff inserted");
               log.info(un);
           /*}else
               log.info("username already available");*/
       } else
           log.error("values cannot be empty");
   
       return row;
   
   }
   
   
   
      //check username availability
       @Override
       public boolean checkUsernameUnique(User user) {
   
       boolean result = true;
   
       String sql = "SELECT count(*) FROM staff WHERE  username = ? ";
   
       int count = jdbcTemplate.queryForObject(
               sql, new Object[]{user.getUsername()}, Integer.class);
   
       if (count > 0) {
           result = false;
           log.info("username already available");
       }
       log.info(result);
       return result;
   }
   

sql 查询工作得很好，我需要一种在 Spring mvc 中获取弹出警报的方法。 在此先感谢:)

Answer 1

要打开一个警告框（在经典 Web 应用程序中），您需要将表单页面（带有已填写的字段）和错误框的 java 脚本代码发送回客户端，以响应发布请求。

通常不会打开表单验证失败的错误框，而是会用红色边框或其他东西标记该字段，并在其旁边写下有关问题的提示。

@RequestMapping(value="/addCustomer",method = RequestMethod.POST)
public ModelAndView saveOrUpdate(@ModelAttribute("newUser")  User newUser, BindingResult validationResult) throws SQLIntegrityConstraintViolationException {

   if (validationResult.hasErrors()) {
        new ModelAndView("userAdd", "command", newUser);
    }

    boolean usernameUnique=staffRepository.checkUsernameUnique(newUser);
    if(usernameUnique) {
        int i = staffRepository.add(newUser);
        if (i == 0)
            return new ModelAndView(new RedirectView("stangeFailurePage"));
        else {
            return new ModelAndView(new RedirectView("successPage"));
        }
    }else{
        validationResult.rejectValue("username", "error.username.exists", "The username is already in use.");
        new ModelAndView("userAdd", "command", newUser);
    }
    return new ModelAndView(new RedirectView("list"));
}

对于验证，您需要将errors-tag 添加到每个输入字段

 <form:input path="username" .../>
 <form:errors path="username" cssClass="error" />

Answer 2

在我的问题中，因为我希望在没有任何重定向的情况下在同一页面中显示警报，所以我编写了另一个控制器方法如下和一个 javascript 代码。在这个控制器方法中，返回一个 null 用户对象，因此“usernameUnique " 变量始终为真，并且每次都给出相同的警报消息。 （考虑有一个单独的控制器方法将填充的数据插入数据库）

 @RequestMapping(value="/uniqueUsername",method=RequestMethod.POST)
 public @ResponseBody int checkUser(@ModelAttribute("newUser")  User newUser ){
 boolean usernameUnique ;
 int returnMsg;

 usernameUnique=staffRepository.checkUsernameUnique(newUser);
 if(!usernameUnique){
        returnMsg= 1;
 }else
        returnType=0;

 return returnType;

}

js 代码如下。这是为#username_admin 文本框更改功能编写的

$(document).ready(function(){
    $("#username_admin").change(function(){
        var uname = $(this).val();
        $.ajax({
            type: "POST",
            url: "https://localhost:8443/admin/users/uniqueUsername",
            data: {"uname": uname},
            success: function(msg){

                  if(msg == 0)
                    alert("OK");
                  else
                    alert("User name exists !... try another");*//*

                alert(msg + uname);


            },
            error:function(){
                alert("ajax failed" +uname);
            }
        });

    });
});