上一篇文章已经将Dao层搭建好了，所以只需要编写jsp及servlet。
具体项目访问GitHub：链接
一、登录
1. 登录界面（index.jsp）
需要导入并加载 jquery.js文件
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!-- 第一种设置全局路径：
使用方式如： <form
action=" ${APP_PATH}/LoginServlet"
等同于: ${pageContext.request.contextPath}
-->
<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
<!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>Servlet 登录注册测试</title>
<script src="${APP_PATH }/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- 第二种设置全局路径：
<\%=request.getContextPath() %>
-->
<form id="form" action="<%=request.getContextPath() %>/login/loginServlet" method="POST">
username:<input type="text" name="username"/><br>
password:<input type="password" name="password" /><br>
<input type="submit" value="登录"/><button type="button" id="ajaxBtn">后台登录</button><br>
<button type="button" id="btnRegister">注册</button>
</form>
<!-- ajax 后台登录 -->
<script type="text/javascript">
$("#ajaxBtn").on('click',function(){
//后台打印
console.log("ajax 后台登录验证");
//ajax
//data：传入表单form 序列化
$.ajax({
url:"${APP_PATH}/login/ajaxServlet" ,
type:"POST" ,
data:$("#form").serialize() ,
success:function(res){
console.log("ajax 校验返回结果:"+res);
/* json 解析 */
var jsons = eval("("+res+")");
console.log("是否登录成功："+jsons.isLogin);
console.log("用户名："+jsons.user[0].username);
console.log("密码："+jsons.user[0].password);
//根据json信息 判断
if("success" == jsons.isLogin){
alert("登录成功：用户名密码正确");
window.location.href= "success.jsp" ; //登录成功跳转页面
}else{
alert("用户登录失败："+jsons.isLogin)
}
}
});
});
$("#btnRegister").on('click',function(){
window.location.href= "register.jsp";
});
</script>
</body>
</html>2. Servlet类（AjaxServlet.java）
使用Json数据格式，需要导入Gson.jar包 。
这里使用注解方式配置Servlet路径。
@WebServlet("/login/ajaxServlet")
public class AjaxServlet extends HttpServlet {
private UserDao userDao ;
private static final long serialVersionUID = 1L;
public AjaxServlet() {
super();
userDao = new UserDao();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取表单数据
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("ajax 后台数据：");
System.out.println("username:"+username);
System.out.println("password:"+password);
//2. 数据库数据 校验
String isLogin = userDao.isLogin(username, password);
System.out.println("是否登录："+isLogin);
//3. 如果登录成功，即用户名及密码正确
// 将用户信息保存到session中
if("success".equals(isLogin)){
HttpSession session = request.getSession();
session.setAttribute("username", username);
session.setAttribute("password", password);
}
//4. 使用JSON格式 返回数据结果
PrintWriter printWriter = response.getWriter();
//使用GSON 将数据转换为JSON数据格式
Gson gson = new Gson();
ArrayList<User> arrayList = new ArrayList<>();
User user = new User() ;
user.setUsername(username);
user.setPassword(password);
arrayList.add(user);
//使用map返回数据如 验证成功或者失败
HashMap<String, Object> hashMap = new HashMap<>();
hashMap.put("isLogin", isLogin); //是否登录成功
hashMap.put("user", arrayList);
//将arraylist数组类型 转换为 json格式
String json = gson.toJson(hashMap);
System.out.println("json数据："+json);
//返回结果
printWriter.write(json);
}
}
这样 一个Ajax异步登录就完成了。接下来就是注册了，简单逻辑如下
二、 注册
1. 注册界面（register.jsp）
代码量小就放上整个页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
<!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">
<script src="${APP_PATH }/js/jquery-1.12.4.min.js"></script>
<title>用户注册</title>
</head>
<body>
<div style="margin: 0 20%">
username:<input id="idname" type="text" name="username"/><br>
password:<input id="idpassword" type="password" name="password" /><br>
<button type="button" id="ajaxBtn">确定</button>
</div>
<script type="text/javascript">
/*'{"username":username,"password":password}' , */
$("#ajaxBtn").on('click',function(){
var username = $("#idname").val();
var password = $("#idpassword").val();
console.log(username+":"+password);
var user = {"username":username,"password":password};
$.ajax({
url:"${APP_PATH}/register/registerServlet" ,
type:"POST" ,
data:user ,
success:function(res){
console.log(res);
if(res == "注册成功"){
alert("注册成功;跳转登录界面");
window.location.href="index.jsp";
}else{
alert("注册失败,原因："+res);
}
}
});
});
</script>
</body>
</html>2. Servlet类（RegisterServlet.java）
@WebServlet("/register/registerServlet")
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private UserDao userDao ;
public RegisterServlet() {
super();
userDao = new UserDao();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取表单数据
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("ajax 后台数据："+username);
System.out.println("username:"+username);
System.out.println("password:"+password);
PrintWriter printWriter = response.getWriter();
//2. 连接数据库， 获取数据信息并判断
if("exist".equals(userDao.isUsernameExist(username))){ //判断用户名是否存在
printWriter.write("username is exits");
}else{
//用户名不存在，可以注册
int register = userDao.isRegister(username, password);
if(register == 0){
printWriter.write("注册失败");
}else{
printWriter.write("注册成功");
}
}
}
}