Form 태그
★데이터 전송을 위한 3가지 조건★
form태그의 action 속성 -> 값을 어디로 보낼지 나타냄
input태그의 name속성 -> 어떤 값을 보내는지 나타냄
input태그의 type속성 submit -> 값을 보내는 시점
이 3가지가 form태그에 있어야 한다.
src - main - webapp에 hmtl 만들어서 ex05form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>데이터 보내기</h1>
<!--
form태그 필수 3요소
1. action(어디로 보낼것인가)
1) 전체경로 : http://localhost"8081/Servlet/ex01
외부 서버(다른컴퓨터, 다른서버)에 요청
Flask를 쓸 경우 전체경로
2) 상대경로 : URLMapping, JSP경우 확장자까지
내부 서버(프로젝트 내 파일) 접근
2. name(보내는 데이터를 구분할 수 있는 이름)
3. type="submit"(언제 데이터를 보낼 것인지)
-->
<form action="ex05form">
<input type="text" name="data">
<input type="submit" value="send" >
</form>
</body>
</html>ex05form.java
@WebServlet("/ex05form")
public class ex05form extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 파라미터 수집 : form태그로 전달받은 데이터를 변수에 담아 보관하는 과정
//requst.getParameter("input태그의 name")
// 해당하는 name이 없으면 null값 리턴
String data = request.getParameter("data"); //html에서 input에 붙였던 name을 가져온다
System.out.println(data);
}
}
HTML에서 ctrl+f11로 먼저 실행시키고
다음화면에서 123이라는 데이터를 보내면
ex05form.java에서 입력한 123데이터가 출력된다.
Form태그의 흐름
form태그안의 submit 버튼을 누르면 요청이 전송된다. (페이지 이동이 일어남)
버튼을 누르면 ex05form.html에서
ex05form (Servlet)으로 페이지이동
http://localhost:8081/Servlet/ex05form?data=123
보내준 데이터를 request가 받아서 url에 담아 가져간다
(data=123)
http://localhost:8081/Servlet/ex05form : request URL(요청주소)
?data=123 : 쿼리스트링(데이터를 URL에 붙여서 요청)
?data=123 -> 쿼리스트링(Query String) 이라 한다.
쿼리스트링: 데이터를 가지고 페이지를 이동하는 역할을 한다.
쿼리스트링: ? data = 123
시작 input에서 적어줬던 name value
입력된 데이터 값(value)
여러개 일때는 ? name =value & name2 = value2로 표시
- http://localhost:8081/Servlet/ex05form?data=123
- URL + 쿼리스트링
- URL + @ : URI 라고 한다.
- http://localhost:8081/Servlet/ex05form -> 이것도 URI
ex06plus.html
ex06plus.html에서 두 수를 입력 받아 ex06plus.java(Servlet)으로 요청
Servlet에서 두 수의 합을 구해서
12 + 13 = 25 형식으로 응답해주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>두 수 더하기</h1>
<!--
ex06plus.html에서 두 수를 입력 받아 ex06plus.java(Servlet)으로 요청
Servlet에서 두 수의 합을 구해서
12 + 13 = 25 형식으로 응답해주기
-->
<form action="ex06plus">
<input type="number" name="num1">+
<input type="number" name="num2">
<input type="submit" value="확인">
</form>
</body>
</html>explus06.java
@WebServlet("/ex06plus")
public class ex06plus extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 파라미터 수집
String num1 = request.getParameter("num1");
String num2 = request.getParameter("num2");
System.out.println(num1+"+"+num2+"="+(Integer.parseInt(num1)+Integer.parseInt(num2)));
//Integer.parseInt("변환할 문자열");
// NumberFormatException : String -> int로 변환할 때, 숫자로 바꿀수 없는 문자열
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
//out.print(num1+"+"+num2+"="+(Integer.parseInt(num1)+Integer.parseInt(num2)));
out.print("<html>");
out.print("<head></head>");
out.print("<body>");
// 12 + 13 = 25 형식으로
out.print(num1 + "+"+num2+"="+(Integer.parseInt(num1) + Integer.parseInt(num2)));
out.print("</body>");
out.print("</html>");
}
}↓
Servlet에서 request로 부터 시작하는 이유는 html에서 온 요청(request)을 받기 때문에.
Parameter -> 13 ,num2 를 보고 Parameter라고하고
그래서 요청을 받고 데이터를 받아오기위해 request.getParmeter("num2")를 쓴다.
input type의 name값 -> num2
이때 num2가 input type의 name값중에 없으면 -> null을 반환한다.
이때 request.getParmeter("num2")는 문자,숫자가 들어와도 문자형이다.
계산을 위해 문자열을 정수형으로 바꿔줄때 Integer.parserInt()로 형변환시켜준다.
페이지에 나타내기위해 응답형식지정, PrintWriter생성, 내용작성 을 해준다
※ 복습
HTML 에서 Servlet으로 데이터 전송
<form action = " 어디로 보낼것인지"> -> 이때 받는 대상이 Servlet이면 URLMapping만 쓰면된다.
<input type = " " name = "구분할 수 있는 이름"> -> 전달 하고자 하는 데이터가 있을때 name값이 꼭 필요하다.
<input type = " " name = "name2">
<input type="submit" value="send"> -> 언제 보낼것인지 결정
</form>
'빅데이터 서비스 교육 > JSP Servlet' 카테고리의 다른 글
| JSP 지시자, 내장객체 (0) | 2022.05.10 |
|---|---|
| JSP 개념, 구성요소 (0) | 2022.05.10 |
| JSP Servlet (0) | 2022.05.09 |
| JSP/ Servlet 웹 동작 방식 (0) | 2022.05.02 |
| JSP/Servlet 기초 (0) | 2022.05.02 |