JavaWeb+Servlet：（二）Ajax非同步登入註冊？Servlet+Json 資料互動
阿新 • • 發佈：2018-12-10
上一篇文章已經將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("註冊成功");
}
}
}
}