웹 브라우저에서 서블릿으로 데이터 전송하기
GET/POST 전송 방식
GET 방식으로 서블릿에 요청
POST 방식으로 서블릿에 요청
-
실습1. - HTML / Servlet 생성
-
WebContent > login3.html 생성 (데이터는 login.html과 동일, action을 login3으로, method는 post)
-
sec03.01 패키지 생성 > LoginServlet3 클래스 생성, mapping-/login3, init/doPost/destroy
알아둘 점
-
GET/POST 방식으로 전송된 데이터는 반드시 HttpServlet에서 오버라이딩된 doGet()이나 doPost() 메서드를 사용해야 함
-
두 메서드가 서블릿에 존재하지 않거나, 사용자가 임의로 만든 메서드를 사용하면 오류가 발생
GET 방식과 POST 방식 요청 동시에 처리하기
doHandle()을 호출해서 모든 기능을 구현하는 예
-
GET+POST 방식일 때, 두 기능을 각각 구분해서 구현하면 불편함
-
전송된 방식으로 doGet()이나 doPost()메서드로 처리 후 doHandle()을 호출하여 모든 기능을 구현하는 예제 실습
-
실습1. HTML, Servlet 생성
-
login4.html 생성, (copy login.html, action > login4) - Get방식임
-
sec03.ex02 패키지 생성 > LoginServlet4 서블릿 - /login4, init/doGet/doPost/destroy
-
실습 3. doPost 테스트
-
login4.html method를 post로 변경
-
요청 : http://localhost:8090/pro06/login4.html
-
요청 후 URL : http://localhost:8090/pro06/login4
-
콘솔 : (초기화는 아까 되었기 때문에 X)
자바 스크립트로 서블릿에 요청하기
-
자바스크립트로 서블릿에 요청하기
-
실습1. login.html을 추가
-
실습 3. 실행
-
http://localhost:8090/pro06/login5.html 브라우저로 호출
-
ID/PW 둘 중 하나라도 안넣으면 아이디와 비밀번호는 필수입니다. 알림
-
다 넣으면 웹 브라우저에서 ID/PW 출력, 주소는 Hidden 기본값으로 셋팅되있던게 출력됨
서블릿을 이용한 여러 가지 실습 예제
- 실습 전, WebContent 위치에 실습용 HTML파일을 따로 저장하는 test01 폴더를 만듦
실습 예제 1. 서블릿에 로그인 요청시 유효성 검사
-
실습2. Servlet 작성
- sec04.ex01.LoginTest, /loginTest, init/destroy/doPost
-
실습3. 실행
-
http://localhost:8090/pro06/test01/loginTest.html 브라우저에서 실행(폴더명까지 꼭!)
-
ID가 없을 시 : 아이디를 입력하세요. (버튼) 로그인 창으로 이동
-
ID가 있을 시 : ID님 로그인하셨습니다!!
-
둘 다, 콘솔에 ID/PW 전달됨
실습 예제 2. 서블릿으로 로그인 요청시 관리자 화면 나타내기
-
실습3. 실행하기
-
아이디를 안넣었을 때와, 일반 아이디로 로그인했을 때는 위와 동일
-
admin으로 로그인시, 관리자로 로그인 하셨습니다!!가 뜨면서 아래 기능 버튼 2개 위치
실습 예제 3. 서블릿으로 요청시 구구단 출력
-
실습 3. 실행하기
- http://localhost:8090/pro06/test01/gugu.html
실습 예제 4. 서블릿의 응답 기능을 이용해 구구단 테이블의 행 배경색 교대로 바꿔보기
TIP1. HTML 소스 보기
브라우저 우클릭 후 페이지 소스 보기
TIP2. HTML 컬러 차트
LINK
TIP3. 이클립스에서 계층형 패키지 구조 보기
이클립스 > Project Explorer > ▼ > Package > Hierarchical
반대로는 Flat
-
실습 1. HTML 생성
- gugu.html을 복사하여 gugu2.html을 생성 (action > /pro06/guguTest2)
-
실습 2. Servlet 생성
- GuguTest2 클래스를 생성하고 코드를 지정
-
실습 3. 실행
- http://localhost:8090/pro06/test01/gugu2.html
실습 예제 4. 서블릿의 응답 기능을 이용해 라디오박스와 체크박스를 구현하기
-
실습 1. HTML 생성
- gugu2를 복사한 후, action만 /pro06/guguTest3으로 변경
-
실습 2. Servlet 생성
- sec04.ex01.GuguTest3.java
-
실습 3. 실행
- http://localhost:8090/pro06/test01/gugu3.html
핵심