(56) [JSP] 2일 JSPRequest parameter 및 내부객체

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

GET 방식의 파라미터 전송

1. a. 태그를 이용한 GET 방식

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

	<pre>
		- GET 방식 
			: 기본 파라미터 전송 방식
			: 클라이언트가 서버에 접속할때 기본적인 접속 방식은 GET 이다.
			: 주소줄에 파라미터를 실어서 보낸다.
			<%-- 형식 : 주소?이름1=값1&이름2=값2 --%>
			: Query String - GET 방식으로 전송 되는 파라미터
	</pre>
	<hr>

	<%-- a 태그를 이용하여 GET 방식으로 파라미터 전송 --%>
	<%-- 한글등을 인토딩하지 않고 GET 방식으로 전송하면 전송 되지 않을 수 있다. --%>

	<p>
		<a href="ex01_ok.jsp?name=서진태&age=25">확인</a>
	</p>

2. 자바스크립트를 이용(location.href)

	<%--자바스크립트를 이용하여 GET 방식으로 파라미터 전송 --%>
	<p>
		<button type="button" onclick="sendOk();">확인</button>
	</p>
	
	<script type="text/javascript">
	function sendOk() {
		let name = '자%바';  // '자'만 나옴
		name = encodeURIComponent(name); // 주소 형식으로 인코딩 
		let age = 20;
		
		let url = 'ex01_ok.jsp?name='+name+'&age='+age;
		location.href=url;
	}
	</script>

3. 자바스크립트를 이용(form 태그)

	<%--자바스크립트를 이용하여 GET 방식으로 파라미터 전송 --%>
	<p>
		<button type="button" onclick="sendOk();">확인</button>
	</p>
	<hr>
	
	<%--form 태그를 이용한 GET 방식으로 전송 --%>
	<%--form 태그를 사용하는 경우에는 일반적으로 GET 방식으로 전송하지 않는다. --%>
	<%--form 태그에서 method 속성을 명시하지 않으면 GET 방식이다. --%>
	
	<form action="ex01_ok.jsp">
			<p>이름 : <input type="text" name="name"></p>
			<p>나이 : <input type="text" name="age"></p>
			<p>
				<button type="submit">보내기</button>
			</p>
			
	</form>

형식 <form name="폼이름" action="서버주소" method="전송방식">~</form>

encodeUROComponent	알파벳과 숫자를 제외한 모든 문자를 인코딩
encodeURI	인터넷 주소에 사용되는 일부 특수문자 및 영수자를 제외하고 인코딩
decodeURIComponent	알파벳과 숫자를 제외한 모든 문자를 디코딩
decodeURI	인터넷 주소에 사용되는 일부 특수문자 및 영수자를 제외하고 디코딩

POST 방식의 파라미터 전송

일반적으로 POST 방식으로 파라미터를 전송하기 위해서는 form 태그를 이용하여 전송한다. form 태그의 method 속성을 method="post"로 지정하면 POST 방식으로 파라미터를 전송한다.

<%@ page contentType="text/html; charset=UTF-8"%>
<!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>
	<pre>
		- POST 방식으로 파라미터를 전송하면 body에 정보를 실어서 보냄
		- POST 방식은 용량에 제한이 없음
		- POST 방식은 form 태그의 method ="post" 속성으로 설정
		- form 태그에서 method ="post" 방식의 enctype은 기본적으로 
		  enctype="allication/x-www-form.urlencoded"이다.
		- application/x-www-form-urlencoded는 
		  파라미터를 주소 형식으로 인코딩한다.
		- enctype은 method="post"에서만 유효하다.
	</pre>
	<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>

form / submit

<%@ page contentType="text/html; charset=UTF-8"%>
<!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>
	<%--
		- form 태그 안에 submit 버튼이 있어야 서버로 전송할 수 있는 기능이 있다.
		- submit 버튼의 종류 
		  1) <button> 확인 </button>
		  2) <button type="submit"> 확인 </button>
		  3) <input type="image" src="이미지">
		  4) <input type="submit" value="확인">
		  
		- input 태그의 required, pattern 속성 
		  input 태그가 form 태그안에 있어야 하고 submit 버튼을 누를때 반응
		  
	    - <button type="reset">초기화</button>
	      reset 버튼은 form 태그 안에 있어야 반응한다.  
	 --%>
	<hr>

	<form action="ex03_ok.jsp" method="post">
	<p>
		이름 : <input type="text" name="name" required>
	</p>
	<p>
		나이 : <input type="text" name="age" pattern="\d+">
	</p>
	<p>
		<button type="submit">전송하기</button>
		<button>전송</button>
		<input type="submit" value="전송">
		<input type="image" src="btn_confirm.png">
		<button type="button">일반버튼-전송기능없음</button>
		<button type="reset">초기화</button>
		
	</p>
	</form>


</body>
</html>

form / submit 유효성검사

<%@ page contentType="text/html; charset=UTF-8"%>
<!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>
	
	<%--
		- form 태그 안의 submit 버튼을 누르면 submit 이벤트가 발생
		- submit 버튼을 사용하는 경우 유효성 검사는 form 태그의 submit
		  이벤트 핸들러에서 한다.
		- submit 이벤트 핸들러에서 false를 반환하면 서버로 전송되지 않는다.  
	 --%>

	<form name="myForm" action="ex04_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>
	
	<script type="text/javascript">
	const check = () => {
		const f = document.myForm;
		
		if(! /^[가-힣]{2,5}$/.test(f.name.value)){
			f.name.focus();
			return false;
		}
		
		if(! /^\d{1,3}$/.test(f.age.vlaue)){
			f.age.focus();
			return false;
		}
		
		// f.submit(); // 이곳에서 submit()함수를 호출하면 서버로 두번 전송된다. 
		return true;
	};
	
	
	// 
	window.addEventListener('load',()=>{
		document.myForm.addEventListener('sumbit',e=> {
			if(! check()){
				e.preventDefault();
			}
		});
	});
	
	</script>


</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<!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>
	
	<%--
		- form 태그 안의 submit 버튼을 누르면 submit 이벤트가 발생
		- submit 버튼을 사용하는 경우 유효성 검사는 form 태그의 submit
		  이벤트 핸들러에서 한다.
		- submit 이벤트 핸들러에서 false를 반환하면 서버로 전송되지 않는다.  
	 --%>
	
	<form name="myForm" action="ex04_ok.jsp" method="post" onsubmit="return check();">
	<!-- form 태그안에 있어야 submit 이벤트 발생 -->
	<!-- submit 버튼은 onclick 이벤트 x -->
	
	<p>
		이름 : <input type="text" name="name">
	</p>
	<p>
		나이 : <input type="text" name="age">
	</p>
	<p>
		<button type="submit">전송하기</button>
	</p>
	</form>
	
	
	<script type="text/javascript">
	const check = () => {
		const f = document.myForm;
		
		if(! /^[가-힣]{2,5}$/.test(f.name.value)){
			alert('이름을 입력하세요');
			f.name.focus();
			return false;
		}
		
		if(! /^\d{1,3}$/.test(f.age.vlaue)){
			f.age.focus();
			return false;
		}
		
		// f.submit(); // 이곳에서 submit()함수를 호출하면 서버로 두번 전송된다. 
		return true;
	};
	

	</script>


</body>
</html>

form/일반 버튼 - 유효성 검사

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

	<h3> form 데이터 서버로 전송 : 일반 버튼 - 유효성 검사</h3>
	
	<%--
		- form 태그의 내용을 일반버튼, a 태그등을 이용하여 서버로 전송하기 위해서는 
		  form 태그의 submit() 함수를 호출한다. 
		  
	 --%>
	
	<hr>

	<form name="myForm" action="ex05_ok.jsp" method="post">
	
	<p>
		이름 : <input type="text" name="name">
	</p>
	<p>
		나이 : <input type="text" name="age">
	</p>
	<p>
		<button type="button" onclick="sendOk();">전송하기</button> <!-- span,a 태그 모두 가능 -->
		<span onclick="sendOk()">전송</span>
	</p>
	</form>
	
	
	<script type="text/javascript">
	const sendOk = () => {
		const f = document.myForm;
		
		if(! /^[가-힣]{2,5}$/.test(f.name.value)){
			alert('이름을 입력하세요');
			f.name.focus();
			return;
		}
		
		if(! /^\d{1,3}$/.test(f.age.vlaue)){
			f.age.focus();
			return;
		}
		
		f.submit(); // 이곳에서 submit()함수를 호출하면 서버로 두번 전송된다. 
		
	};

	</script>

</body>
</html>

'💻 > JSP' 카테고리의 다른 글

(57) [JSP] 3일 JSP 내부 객체, 액션 태그 (0)	2024.05.09

Power Up!

(56) [JSP] 2일 JSPRequest parameter 및 내부객체

GET 방식의 파라미터 전송

POST 방식의 파라미터 전송

form / submit

form / submit 유효성검사

form/일반 버튼 - 유효성 검사

'💻 > JSP' 카테고리의 다른 글

티스토리툴바

(56) [JSP] 2일 JSPRequest parameter 및 내부객체

GET 방식의 파라미터 전송

POST 방식의 파라미터 전송

form / submit

form / submit 유효성검사

form/일반 버튼 - 유효성 검사

'💻 > JSP' 카테고리의 다른 글

관련글

티스토리툴바