前後端ajax交互驗證
好了，接下來直接上代碼，實體類 User就直接跳過了 都是getter、setter。 下面是接口方法：
// 驗證用戶名密碼
@Select ("select * from t_user where login_name=#{login_name,jdbcType=VARCHAR} and login_password=#{login_password,jdbcType=VARCHAR} " )
User getByNameAndPwd(@Param ("login_name" )String login_name,@Param ("login_password" )String login_password);然後UserService
package com.ys.service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ys.bean.User;
import com.ys.dao.UserDao;
@Service
public class UserService {@Autowired
private UserDao userdao;
/**
* 驗證登錄
* @param login_name
* @param login_password
* @param request
* @return
*/
public Map<String, Object> loginValid (String login_name,String login_password,HttpServletRequest request){
User user=userdao.getByNameAndPwd(login_name, login_password);
Map<String, Object> map=new HashMap<>();
if (user==null ){
map.put("status" , "userNameOrPwdError" );
}else if (user!=null &&!"" .equals(user.getUser_id())){
map.put("status" , "ok" );
map.put("user" , user);
request.getSession().setAttribute("user" , user);
}
return map;
}
}
註解不要忘了加上， 下邊UseController
@Controller
public class UserController {@Autowired
private UserService userservice;
@RequestMapping (value="login" ,method=RequestMethod.POST)
@ResponseBody
public Map<String,Object> login (String login_name,String login_password,HttpServletRequest request){
return userservice.loginValid(login_name, login_password, request);
}
@RequestMapping (value="loginOutput" )
public String loginOutput (HttpServletRequest request){
request.getSession().invalidate();
return "index" ;
}下面是index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path=request .getContextPath();
String basePath=request .getScheme()+"//" +request .getServerName()+":" +request .getServerPort()+path+"/" ;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
<title > Insert title here</title >
</head >
<body >
<div id ="login" >
<c:if test ="${user!=null}" >
<span > ${user.user_name} 你好</span >
<a href ="<%=path%>/loginOutput" > 註銷</a >
</c:if >
<c:if test ="${user==null }" >
<a href ="<%=path%>/loginInput" > 登錄</a >
</c:if >
</div >
</body >
</html > 這裏做了個判斷 讀取session裏的值判斷就好了 如果登錄了session就有值 UserService裏已經放進去了
最後login.jsp 頁面加上JS文件 JQuery和JQuery-validate
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
String path=request .getContextPath();
String basePath=request .getScheme()+"//" +request .getServerName()+":" +request .getServerPort()+path+"/" ;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
<title > Insert title here</title >
</head >
<script type ="text/javascript" src ="<%=path%>/jquery/jquery-2.1.1.min.js" > </script >
<script type ="text/javascript" src ="<%=path%>/jquery/jquery.validate.js" > </script >
<body >
<form method ="post" id ="signupForm" >
<div id ="loginError" > </div >
用戶名：<input type ="text" name ="login_name" id ="name" /> <br >
密碼：<input type ="password" name ="login_password" id ="pwd" /> <br >
<button id ="b" > 登錄</button >
</form >
</body >
<script type ="text/javascript" >
$(function () {"#signupForm" ).validate({
onsubmit:true ,
rules: {
login_name: {
required: true ,
minlength: 5
},
login_password: {
required: true ,
minlength: 5
}
},
messages: {
login_name: {
required: "請輸入用戶名" ,
minlength: "用戶名至少爲5位"
},
login_password: {
required: "請輸入密碼" ,
minlength: "密碼長度最少爲5位"
}
},
submitHandler: function () {"${pageContext.request.contextPath}/login" ,
method:"post" ,
data:$('#signupForm' ).serialize(),
dataType:'json' ,
success:function (ret) {if (ret.status=='ok' ){
$("#loginError" ).html("登錄成功！" );
var href = '${pageContext.request.contextPath}/jsp/index.jsp' ;
window.top.location.href = href;
}else if (ret.status=='userNameOrPwdError' ){
$("#loginError" ).html("用戶名或密碼錯誤！" );
}
}
});
}
})
});
</script >
</html > 到這就結束了，有問題留言。
