前言

一直以来都是直接提交form跳转登录，但是存在一些问题就是当密码错误的时候，又得重新跳转回来。感觉不是很理想。故采用异步校验是比较稳妥的一种处理的方式。

具体过程

jsp页面的编写

关键性代码如下

 <form name="subinfo" class="form" method="post">
     <div>
       <input type="text" required="" id="username" name="username" placeholder="username" class="input input_user"/>
     </div>
     <div class="two">
      <input type="password" required="" id="password" name="password" placeholder="password" class="input input_password"/>

     </div>
    <div class="error_mes">
      <span class="error-icon"></span>
      <span class="error-message">用户名或者密码错误，请重新输入</span>
    </div>
      <button type="reset" class="btn-login" title="登录" >重置</button>
     <button type="button" class="btn-login" title="登录" onclick="formSubmit()">登录</button>


 </form>

js代码

function formSubmit() {

    $.ajax({
        data:"username=" + $("#username").val().toString() + "&password=" + $("#password").val().toString()+ "&type=" + statu,
        type:"post",
        url:"/user/login.do",
        success:function (response){
        if (response=="false") {
            $(".error_mes").css("display", "block");
            return false;
        }
        if (response=="true"){

                window.location = "index";
                return true;
           }
     }

springmvc 代码

    @RequestMapping("/user/login.do")
    @ResponseBody
    public String toSearch(User user) {
        System.out.println(user.getType());
        boolean result = loginService.normalLogin(user);
        if (result){
            return "true";
        }
        return "false";
    }

    @RequestMapping("/index")
        public String toIndex(){
            return "index";
        }
}

提示

更加纤细的验证过程不在叙述
若有问题欢迎留言。

总结

关键点在于对ajax异步校验的语法理解。