submit 이벤트 발생 -> 기본이벤트 핸들러를 막도록 함
사용자가 버튼을 눌렀을 때만 이벤트가 발생해야 되기 떄문에 기본 이벤트 핸들러를 막아야한다. form의 객체를 얻고 그 값을 loginFormObj 변수에 담는다. submit 이벤트가 발생했을 때 리턴값을 false로 하여 이벤트 헨들러를 금지한다. 현재는 로그인버튼을 눌러도 아무 반응이 없다.
form의 경로는 아래와 같다.
ajax 요청-> 결과를 가져와서 특정값 호출
url, method, data, seccess, error 의 프로퍼티를 정의한다. url 은 ajax 을 요청할 url이 된다. 아래 코드의 위치경로를 나타낼것이다.
이것을 바로 나타내지 않고 새로운 변수에 값을 대입해서 나타낼 것이다. 아래의 코드를 보도록 하겠다.
순서대로 보면 form이 포함하고 있는 것의 객체(loginFormObj) 를 만들고 클릭이 되면 이벤트가 처리되게 하는데 action = ".login" 속성을 ajaxUrl에 담아 ajax 에 정의하였다. 그 외의 것들도 같은 방식으로 표현을 하도록 하겠다. data 값에는 id와 pwd가 들어있다. find() - 후손객체를 찾는다. input 요소중에 name 속성이 id 인 것을 찾아 val() 메서드를 사용하여 아이디 입력란에 입력된 값을 얻어 올 수 있다. pwd도 동일하게 적용한다.
▶ 이렇게 전달하는 이유 아래의 코드를 보면 서블릿에서 request.getParameter로 받아와야하는데 ajax 바꾸기 때문에 정확히 값을 찾아오게 끔 해야한다. 정확한 값을 찾아오면 그 값을 전송데이터로 사용해서 request.getParameter의 값으로 사용을 한다.
- selvet
success 콜백함수의 매개변수 responseData를 적용한다. responseData는 응답내용을 의미하는데 응답내용은 서블릿에서 최종 응답을 해줄 때 responseData에 들어오게 된다. 그 값을 alert() 사용하여 확인해 보는 절차이다.
아이디와 비밀번호를 입력하고 로그인을 하였을 때 기존의 화면결과가 지워지지 않고 alert 창이 보여진다.
