[ajax] 로그인 기능 Ajax 예제

[ajax] 로그인 기능 Ajax 예제

 

 

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

 

만약 Jsp로 구성한다면

 

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

 

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

 

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

 

그리고 페이지또한

 

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

 

Solutions:

 

Ajax 구문

$('#btn_login').click(function() {

          var mid = $('#txt_mid').val();

          var psw = $('#txt_psw').val();

          $.ajax({

              type : "POST",

              url : "/BoardProject/login.ref",

              data : "mid=" + mid + "&psw=" + psw,

              dataType : "text",

              success : function(data, textStatus, xhr) {

                 if (data == 'loginFail') {

                      alert('로그인에 실패하였습니다.')

                  } else {

                      window.location.href = 'main.jsp';

                  }

              },

              error : function(request, status, error) {

                  alert("code:" + request.status + "\n" + "error:" + error);

              }

          })

});

 

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

public class BoardLoginCommand implements BoardCommand{

    @Override
    public void execute(HttpServletRequest request, HttpServletResponse response) {
        String mid = request.getParameter("mid");
        String password = request.getParameter("psw");
        System.out.println("id"+mid+",pw"+password);
        HttpSession session = request.getSession();

        DAO dao = new DAO();
        ArrayList<DTO> list = dao.loginMember(mid, password);
        System.out.println(list);
        if(list.isEmpty()){
            System.out.println("로그인안됨");
            try {
                response.getWriter().write("loginFail");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else{
        request.setAttribute("list", list);
        session.setAttribute("mid", mid);
        }
    }

}

 

출처 : https://unordinarydays.tistory.com/98