通过使用ajax实现用户的登录
1、前端页面：
具体实现：(省略js文件的引用)
<body>
<%Date date = new Date();SimpleDateFormat sdf = new SimpleDateFormat("YYYY");String time = sdf.format(date);%>
<div class="container">
<img class="bgone" src="./images/1.jpg" />
<img class="pic" src="./images/a.png" />
<form>
<div class="table">
<div class="wel">教师教学工作量统计系统</div>
<div class="wel1">Statistical System Of Teaching Workload</div>
<div class="dtext">© <%=time %> 圣文顺 & 蔡熙贝. All Rights Reserved.</div>
<div class="user">
<div id="yonghu"><img src="./images/yhm.png" /></div>
<input type="text" name="staffid" id="staffid"/>
</div>
<div class="password">
<div id="yonghu"><img src="./images/mm.png"/></div>
<input type="password" name="password" id="password"/>
</div>
<div class="fontdiv"><a href="javascript:void(0)" onclick="updatePwd()" class="font">忘记密码？</a></div>
<font color="red"><label id="tip" class="tip"></label></font>
<input class="btn" type="button" onclick="loginHome()" value="登录"/>
</div>
</form>
</div>
</body>
</html>
2、Ajax实现的Js文件
function loginHome(){
var name =$("#staffid").val();//#是id选择器
var pwd =$("#password").val();
if(name==""){
document.getElementById("tip").innerText="用户名不能为空";
return false;
}
if(pwd==""){
document.getElementById("tip").innerText="密码不能为空";
return false;
}
else{
$.ajax({
type:"post", //请求类型
url:"login.aspx", //请求地址
dataType:"json", //预期返回的参数类型
async: true, //true代表的是异步请求，false代表的是同步请求，若为同步请求则会锁住浏览器
data:{staffid:name,password:pwd}, //传入后端Controller的参数
success:function(data){ //这里的data是后台返回的值
var password = data.password;//提取出来密码
if(pwd != password){
document.getElementById("tip").innerText="账号或密码输入错误";
}else{
window.location.href="home.aspx";
}
}
});
}
}
3、控制器部分
这里需要讲一下，因为js文件中dataType是json，也就是返回的是一个JSON格式的对象，所以控制器需要使用@ResponseBody注解
@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML。
数据，需要注意的呢，在使用此注解之后不会再走试图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。
@RequestMapping("login.aspx")
@ResponseBody //@ResponseBody 注解用来将对象转化成json格式，在这里也就是说返回的user是json格式的
public User login(String staffid,String password,HttpServletRequest request,HttpServletResponse response) throws IOException {
HttpSession session = request.getSession();
userDao = sqlSession.getMapper(UserDao.class);
User user = userDao.queryUser(staffid);
if(user!=null) {
if(password.equals(user.getPassword())) {
session.setAttribute("user", user);
return user;
}else {
return user;
}
}else {
return null;
}
}
4、演示
5、写在最后，json格式需要下载相应jar包
