登录页面的Controller的代码如下:
在这过程中,需要对填入数据进行判断,是否为用户名存在?是否密码有误?是否验证码有误?如若都没有错误则页面跳转至登录成功页面。
@RequsetMapper("/login.do")
public @ResponseBody Map<String, Object> login(HttpServletRequest req,String validatecode,Model m,Userlist u){
Map<String , Object> map =new HashMap<String,Object>();
System.out.println(u.getUserAccount());
Userlist us=userService.selectname(u.getUserAccount());//定义一个新的Userlist 并将数据库查到的值赋予它
//数据库中没有该用户
if(us == null){
map.put("suc", false);
map.put("error", "用户名不存在!");
return map;
}
String md5pwd=StringUtil.encode(u.getUserPassword());
if(!md5pwd.equals(us.getUserPassword())){
map.put("suc", false);
map.put("error", "密码错误!");
return map;
}
String valiCode =(String)req.getSession().getAttribute("validateCode");
if(!validatecode.trim().equalsIgnoreCase(valiCode)){
map.put("suc", false);
map.put("error", "验证码错误!");
return map;
}
map.put("suc",true);//如果以上判断都不是,则说明登录成功!跳转成功页面。
map.put("url","index.do");
return map;
}
页面AJAX的写法
这里需要注意的是JS,AJAX传值问题.var userAccount=$("#userAccount").val(); 这种方法传的是页面数据,可直接与数据库中数据进行比较。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function test(){
var userAccount=$("#userAccount").val();
var userPassword=$("#userPassword").val();
var validatecode=$("#validatecode").val();
var flag=true;
//报纸名称
if(userAccount=="") {
flag=false;
alert("用户名不能为空!");
return;
}
if(userPassword=="") {
flag=false;
alert("密码不能为空!");
return;
}
if(validatecode=="") {
flag=false;
alert("验证码不能为空!");
return;
}
$.ajax({
url:'login.do',
type:'post',
data:'userAccount='+userAccount+'&userPassword='+userPassword+'&validatecode='+validatecode,
datatype:'json',
success: function(msg){
if(msg.suc){
location.href=msg.url;
}else{
alert(msg.error);
}
}
})
}
页面表单数据。
<tr>
<td width="31%" height="35" class="login-text02">用户名称:<br /></td>
<td width="69%"><input id="userAccount" name="userAccount" type="text" size="30" /></td>
</tr>
<tr>
<td height="35" class="login-text02">密 码:<br /></td>
<td><input id="userPassword" name="userPassword" type="password" size="33" /></td>
</tr>
<tr>
<td height="35" class="login-text02">验证图片:<br /></td>
<td><img id="imgcode" src="verifyCodeServlet?tm=<%=new Date() %>" width="109" height="40" /> <a href="javascript:void(0)" onclick="document.getElementById('imgcode').src='verifyCodeServlet?code='+Math.random();" class="login-text03">看不清楚,换张图片</a></td>
</tr>
<tr>
<td height="35" class="login-text02">请输入验证码:</td>
<td><input id="validatecode" name="validatecode" id="validatecode" type="text" size="30" /></td>
</tr>
<tr>
<td height="35"> </td>
<td><input name="Submit" type="button" class="button" value="确认登陆" onclick="test()"/>
</tr>