1008_Servlet/JSP : 파라미터 전송 GET 방식 / POST 방식 / 서버에 데이터 보내기 전 유효성 검사

호쏘2 2021. 10. 10. 22:59

2021. 10. 10. 22:59

인코딩과 디코딩

- 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 것을 인코딩(encoding)이라 하며, 반대로 문자를 원래대로 되돌리는 것을 디코딩(decoding)이라 한다.

- HTTP와 같은 통신 프로토콜은 ASCII 문자만을 지원하며, ASCII 문자로 표현할 수 없는 영어 이외의 언어는 전송할 수 없다. 따라서 MIME은 ASCII가 아닌 문자를 인코딩을 이용해 영어가 아닌 다른 언어를 전송할 수 있는 방식을 정의한다.

- HTML 폼은 method="post"인 경우 기본적으로 문자열을 application/x-www-form-urlencoded MIME 형식(enctype 속성을 생략한 경우)으로 인코딩하여 전송한다.

- application/x-www-form-urlencoded MIME 형식 인코딩

공백은 +, 영숫자가 아닌 문자는%HH(문자코드의 16진수 2자리)로 인코딩 된다.

파라미터 값의 인코딩 및 디코딩

- 파라미터 값의 인코딩

웹브라우저 : 웹 서버에 파라미터를 전송할 때 알맞은 캐릭터 셋(charset)을 이용해서 파라미터 값을 인코딩

웹 서버 : 알맞은 캐릭터 셋(charset)을 이용해 웹 브라우저가 전송한 파라미터 데이터를 디코딩

캐릭터 셋(charset)종류 : ISO-8859-1(기본), UTF-8, euc-kr 등...

- 웹 브라우저가 'UTF-8'을 이용해 인코딩 했다면 웹 서버는 ;UTF-8'을 이용해 파라미터 값을 디코딩 해야 올바른 파라미터 값을 사용할 수 있다.

- 웹 브라우저가 인코딩 할 때 사용할 캐릭터 셋과 웹 서버가 디코딩 할 때 사용한 캐릭터 셋이 다를 경우 웹 서버가 잘못된 파라미터 값을 사용한다.

GET 방식의 파라미터 전송

- a 태그를 이용한 파라미터 전송

<%@ page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function send() {
	var name = "자&바";
	var age = 20;
	
	// name을 인코딩하지 않으면 IE는 400에러가 발생하고, 크롬은 '자' 만 전달된다.
	// 자바스크립트를 이용한 인코딩
	name = encodeURIComponent(name); // 주소 형식으로 인코딩 // 매우 중요한 함수!
	
	// GET방식 파라미터(절대로 중간에 공백이 있으면 안됨) : 이름1=값&이름2&값&이름3=값
	var query = "name=" + name + "&age=" + age; // 따옴표 안에는 절대 띄어쓰기 하면 안됌!
	
	// 자바스크립트를 이용하여 GET 방식으로 파라미터 전송
	var url = "ex01_ok.jsp?"+query;
	location.href= url;
}

function sendOk() {
	var f = document.myForm;
	
	// 이름에 "홍%김" 으로 인코딩 안하고 보내면 500 에러
	var name = f.name.value;
	name = encodeURIComponent(name); // name을 인코딩한 것을 
	f.name.value = name; // 다시 form.name 에 넣어줌
	// form의 name에 인코딩된 것으로 변경
	
	f.submit(); // 일반 버튼 등에서 form의 정보를 서버로 전송
}

</script>

</head>
<body>

<h3>파라미터 전송 - GET 방식</h3>

<p>
  - 기본적으로 클라이언트가 서버에 접속하는 경우 파라미터 전송 방식은 GET 방식이다.<br>
  - Query String : GET 방식으로 전송되는 파라미터<br>
  - 주소줄에 파라미터를 실어서 보냄<br>
    <%-- 형식 : 주소?이름=값&이름=값 --%>
  - GET 방식으로 정보를 보낼 때 한글 등은 반드시 인코딩해서 보낸다.<br>
</p>
<hr>

<!-- a 태그를 이용하여 GET방식으로 파라미터 전송 -->
<p>
	<!-- ex01_ok.jsp?name=%ED%99%8D%EA%B8%B8%EB%8F%99&age=20 -->
	<!-- 한글을 인코딩하지 않고 GET방식으로 전공하면 IE에서는 400에러가 발생한다. -->
	<a href="ex01_ok.jsp?name=홍길동&age=20">확인</a> |
	
	<!-- 자바를 이용하여 한글 인코딩 -->
	<a href="ex01_ok.jsp?name=<%=URLEncoder.encode("홍길동", "utf-8")%>&age=20">확인</a>
</p>
<hr>

<!-- 자바스크립트를 이용하여 GET방식으로 파라미터 전송 -->
<p>
	<button type="button" onclick="send();">확인</button>
</p>
<hr>

<!-- form 태그를 이용한 GET 방식 전송 : form 태그를 이용한 GET 방식 전송은 거의 사용하지 않는다. -->
<!-- form 태그를 이용하여 GET 방식으로 전송할 때 method를 생략하면 GET 방식으로 전송된다. -->
<form name="myForm" action="ex01_ok.jsp">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 나이 : <input type="text" name="age"></p>
	<p>
		<button type="button" onclick="sendOk();">전송</button>
		<!-- type="button"은 전송이 되지 않음 -->
	</p>
</form>

</body>
</html>

<%@page import="java.net.URLDecoder"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	// request : 클라이언트가 보낸 요청 정보를 담고 있는 내장 객체
	
	// 클라이언트가 보낸 파라미터 받기
	// GET 방식으로 넘어온 인코딩된 데이터를 디코딩하지 않으면 WAS 따라 한글이 깨질 수 있다.
	String name= request.getParameter("name");
	// 자바에서 인코딩된 정보를 디코딩
	name = URLDecoder.decode(name, "utf-8");
	
	int age = Integer.parseInt(request.getParameter("age"));
	String state = age >= 19? "성인" : "미성년자";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>GET 방식으로 전달받은 파라미터를 이용한 처리 결과</h3>

<p>
	<%=name %>님의 나이는 <%=age %>세 이므로 <%=state %>입니다.
</p>

</body>
</html>

- JavaScript의 location.href 속성을 이용한 파라미터 전송

lovation.href="URL?키1=값1&키2=값2";

- form태그를 이용한 전송

form 태그는 method 속성을 지정하지 않으면 기본으로 GET 방식으로 파라미터를 전송한다.

- GET 방식은 개발자가 직접 인코딩과 디코딩 작업을 해야한다.

POST 방식의 파라미터 전송

- 일반적으로 POST 방식으로 파라미터를 전송하기 위해서는 form 태그를 이용하여 전송한다.

- form 태그의 method 속성을 method="post"로 지정하면 POST 방식으로 파라미터를 전송한다.

- POST 방식에 의해 전달받은 파라미터 값을 디코딩 할 때 사용할 캐릭터 셋을 지정

request.setCharacterEncoding("utf-8");

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터 전송 - POST방식</h3>
<p>
  - POST 방식으로 파라미터를 전송하면 body에 정보를 실어서 보냄<br>
  - POST 방식은 용량에 제한이 없음<br>
  - POST 방식은 form 태그의 method="post"를 통해 전송됨<br>
  - form 태그의 method="post"에서 기본 enctype 설정은
  	enctype="application/x-www-form-urlencoded" 이다.<br>
  	enctype은 문자의 인코딩 방식을 지정하며, 
  	x-www-form-urlencoded는 주소 형식으로 데이터를 인코딩해서 정보를 보낸다.
</p>
<hr>

<form action="ex02_ok.jsp" method="post" >
	<p> 이름 : <input type="text" name="name"></p>
	<p> 나이 : <input type="text" name="age"></p>
	<p>
		<button type="submit">보내기</button>
	</p>
</form>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	// POST 방식으로 넘어온 파라미터의 인코딩 설정
	// POST 방식에서는 파라미터를 받기 전 반드시 아래처럼 문자 인코딩 파라미터를 설정해야 하며
	// 		설정하지 않는 경우에는 한글이 깨진다.
	request.setCharacterEncoding("utf-8"); // 위치가 바뀌면 안됨!
	
	String name= request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	String state = age >= 19? "성인" : "미성년자";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>POST 방식으로 전달받은 파라미터를 이용한 처리 결과</h3>
<p>
	<%=name %>님의 나이는 <%=age %>세 이므로 <%=state %>입니다.
</p>


</body>
</html>

form 태그 안에 있는 submit 버튼의 종류

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>form 데이터 서버로 전송 - submit 버튼</h3>
<p>
  - form 태그 안에 있는 submit 버튼은 서버로 전송할 수 있는 기능이 있다.<br>
  <!-- [submit 버튼 종류] -->
  <!--  1. <button>확인</button> -->
  <!--  2. <button type="submit">확인</button> -->
  <!--  3. <input type="submit" value="확인"> -->
  <!--  4. <input type="image" src="이미지"> -->
  
  <!-- [input 태그의 required 속성] -->
  <!--  input 태그가 form 안에 있어야 하고 submit 버튼을 누를 때만 반응함 -->
</p>
<hr>

<form action="ex03_ok.jsp" method="post">
	<p>이름 : <input type="text" name="name" required="required"></p>
	<p>나이 : <input type="text" name="age" required="required"></p>
	<p>
		<button>확인</button> |
		<button type="submit">확인</button> |
		<input type="submit" value="확인"> |
		<input type="image" src="btn_submit.gif" style="vertical-align: bottom;"> | 
		<!-- inline 태그 안에서만 vertical-align 사용가능 -->
		<button type="button">일반버튼</button>
	</p>
	
</form>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	request.setCharacterEncoding("utf-8"); // 위치가 바뀌면 안됨!
	
	String name= request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	String state = age >= 19? "성인" : "미성년자";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>처리 결과</h3>
<p>
	<%=name %>님의 나이는 <%=age %>세 이므로 <%=state %>입니다.
</p>


</body>
</html>

form 태그안의 submit 버튼을 이용해 서버로 데이터를 보내기 전에 form 태그의 onsubmit 속성을 이용해 유효성 검사하기

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function check() {
	var f = document.myForm;

	if(! /^[가-힣]{2,5}$/.test(f.name.value) ) {
		alert("이름을 입력 하세요");
		f.name.focus();
		return false;
	}
	
	if(! /^(\d){1,3}$/.test(f.age.value) ) {
		alert("나이를 입력 하세요");
		f.age.focus();
		return false;
	}
	
	// 주의!!!
	// submit 버튼에서 f.submit(); 처럼 form의 submit() 함수를 호출하면 서버에 두 번 전송된다.
	
	return true;


}

</script>

</head>
<body>

<h3>form 데이터 서버로 전송 - submit 버튼 : 유효성 검사</h3>
<p>
  - form 태그 안의 submit 버튼을 클릭하면 submit 이벤트가 발생한다. <br>
  - submit 버튼을 사용하는 경우 유효성 검사는 submit 이벤트 핸들러에서 한다.<br>
  - submit 이벤트 핸들러에 false를 반환하면 서버로 전송되지 않는다.
</p>
<hr>

- 이름 한글 2~5자
- 나이는 한자 이상의 숫자

<form name="myForm" action="ex04_ok.jsp" method="post" onsubmit="return check();">
	<p>이름 : <input type="text" name="name"></p>
	<p>나이 : <input type="text" name="age"></p>
	<p>
		<button type="submit">확인</button>
		<button type="reset">다시 입력</button>
		<!-- reset 버튼은 form 태그 안에서만 동작한다. -->
	</p>
</form>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	request.setCharacterEncoding("utf-8"); // 위치가 바뀌면 안됨!
	
	String name= request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	String state = age >= 19? "성인" : "미성년자";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>처리 결과</h3>
<p>
	<%=name %>님의 나이는 <%=age %>세 이므로 <%=state %>입니다.
</p>


</body>
</html>

form 태그안에 일반 버튼을 이용해 서버로 데이터를 보내기 전에 onclick으로 유효성 검사

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function sendOk() {
	var f = document.myForm;

	if(! /^[가-힣]{2,5}$/.test(f.name.value) ) {
		alert("이름을 입력 하세요");
		f.name.focus();
		return;
	}
	
	if(! /^(\d){1,3}$/.test(f.age.value) ) {
		alert("나이를 입력 하세요");
		f.age.focus();
		return;
	}

	f.action = "ex05_ok.jsp"; //서버 주소
	f.submit(); // 일반 버튼 등에서 form의 내용을 서버로 전송

}

</script>

</head>
<body>

<h3>form 데이터 서버로 전송 - 일반 버튼 : 유효성 검사</h3>
<p>
  - form 태그 안의 내용을 일반 버튼을 이용하여 서버로 전송하기 위해서는 
    form 객체의 submit() 함수를 호출한다. <br>
  - submit() 함수를 이용하여 서버로 전송하는 경우 submit 이벤트는 발생되지 않는다.<br>
</p>
<hr>

<form name="myForm" method="post">
	<p>이름 : <input type="text" name="name"></p>
	<p>나이 : <input type="text" name="age"></p>
	<p>
		<button type="button" onclick="sendOk();">확인</button>
		<button type="reset">다시 입력</button>
		<!-- reset 버튼은 form 태그 안에서만 동작한다. -->
	</p>
</form>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	request.setCharacterEncoding("utf-8"); // 위치가 바뀌면 안됨!
	
	String name= request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	String state = age >= 19? "성인" : "미성년자";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>처리 결과</h3>
<p>
	<%=name %>님의 나이는 <%=age %>세 이므로 <%=state %>입니다.
</p>


</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 10월' 카테고리의 다른 글

1012~1013_Servlet/JSP : 서블릿 (ch04,ch05 예제포함), 파라미터, forward (0)	2021.10.14
1008_Servlet/JSP : 검색 (0)	2021.10.10
1008_Servlet/JSP : 선택된 체크박스의 값 반환하기 // 복습 (0)	2021.10.10
1008_Servlet/JSP : (CH03) 예제 (0)	2021.10.10
1008_Servlet/JSP : (CH01) 예제 (0)	2021.10.10

개발새발, 써놓기