springmvc-ajax-jquery 异步校验登录【亲测可用】

前言

一直以来都是直接提交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异步校验的语法理解。