使用ajax验证信息

使用ajax验证信息

1. controller

   @RequestMapping("/check")
   public String check(String username, String password) {
       String msg = "";
       if (username != null) {
           if ("admin".equals(username)) {
               msg = "ok";
           } else {
               msg = "用户名错误";
           }
       }
       if (password != null) {
           if ("123456".equals(password)) {
               msg = "ok";
           } else {
               msg = "密码错误";
           }
       }
       return msg;
   }
   

2. username,password输入框和提示

   <p>
       用户名:<input type="text" id="username" onblur="checkid()">
       <span id="userInfo"></span>
   </p>
   <p>
       密码:<input type="password" id="password" onblur="checkpwd()">
       <span id="pwdInfo"></span>
   </p>
   

3. checkid和checkpwd

   <script>
       function checkid() {
           $.post({
               url: "${pageContext.request.contextPath}/check",
               data: {'username': $("#username").val()},
               success: function (data) {
                   if (data.toString() === 'ok') {
                       $("#userInfo").css("color", "green");
                   } else {
                       $("#userInfo").css("color", "red");
                   }
                   $("#userInfo").html(data);
               }
           })
       }
   
       function checkpwd() {
           $.post({
               url: "${pageContext.request.contextPath}/check",
               data: {'password': $("#password").val()},
               success: function (data) {
                   if (data.toString() === 'ok') {
                       $("#pwdInfo").css("color", "green");
                   } else {
                       $("#pwdInfo").css("color", "red");
                   }
                   $("#pwdInfo").html(data);
               }
           })
       }
   </script>
   

4. 页面效果