通過使用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包
