[Jquery, Ajax] 로그인 기능을 Ajax로 만들어서 좋았던점

Scenario: 로그인을 원래 쌩 jsp로 구성을 해보았엇는데 생각보다 많은게 필요하다.

만약 Jsp로 구성한다면

로그인 -> 로그인ok(로그인이 성공했는지 확인 page) -> 성공시 main

(중간에 jsp 페이지를 안두고 구현 해볼려고했는데, 로그인 실패시 alert 창을 띄울수가 없었다.(엄청 고민해봤는데 결국 포기))

이런식으로 중간에 jsp 페이지를 하나 더 거처야한다. 그러나 Ajax로 구현하면 동적으로 할 수있다.

그리고 페이지또한

로그인->성공시 main 실패시 그냥 alert 창 하나만 띄워주면 됐다. 아주 간편하다.

Solutions:

Ajax 구문

jQuery 0.61 KB

1. $('#btn_login').click(function() {
2.  
3.           var mid = $('#txt_mid').val();
4.  
5.           var psw = $('#txt_psw').val();
6.  
7.           $.ajax({
8.  
9.               type : "POST",
10.  
11.               url : "/BoardProject/login.ref",
12.  
13.               data : "mid=" + mid + "&psw=" + psw,
14.  
15.               dataType : "text",
16.  
17.               success : function(data, textStatus, xhr) {
18.  
19.                  if (data == 'loginFail') {
20.  
21.                       alert('로그인에 실패하였습니다.')
22.  
23.                   } else {
24.  
25.                       window.location.href = 'main.jsp';
26.  
27.                   }
28.  
29.               },
30.  
31.               error : function(request, status, error) {
32.  
33.                   alert("code:" + request.status + "\n" + "error:" + error);
34.  
35.               }
36.  
37.           })
38.  
39. });

controller 단 (servlet으로 프로젝트를 하던 소스코드이므로 스프링에는 다르게 적용할것)

Java 0.72 KB

1. public class BoardLoginCommand implements BoardCommand{
2.  
3.     @Override
4.     public void execute(HttpServletRequest request, HttpServletResponse response) {
5.         String mid = request.getParameter("mid");
6.         String password = request.getParameter("psw");
7.         System.out.println("id"+mid+",pw"+password);
8.         HttpSession session = request.getSession();
9.        
10.         DAO dao = new DAO();
11.         ArrayList<DTO> list = dao.loginMember(mid, password);
12.         System.out.println(list);
13.         if(list.isEmpty()){
14.             System.out.println("로그인안됨");
15.             try {
16.                 response.getWriter().write("loginFail");
17.             } catch (IOException e) {
18.                 e.printStackTrace();
19.             }
20.         }else{
21.         request.setAttribute("list", list);
22.         session.setAttribute("mid", mid);
23.         }
24.     }
25.  
26. }