📌 1. Form을 이용한 데이터 전송 방법: Submit과 자바스크립트

📎 데이터 전송 방식 2가지

👉 Submit타입: 가장 일반적인 방법이다.
👉 자바스크립트: Form의 Name 속성값이 있어야한다.

📎 내장 객체 Request, Reponse

서버와 클라이언트의 간 정보 이동은 Request와 Response를 통해 주고 받게 되는데 JSP와 Servlet에선 내장 객체로 Request와 Response를 기본적으로 제공해준다.

서버는 Request를 통해서 데이터를 받거나, Response를 통해서 클라이언트 측으로 데이터를 보내고, 페이지 이동시에도 두가지 내장객체를 이용해 데이터를 담아서 주고 받을 수 있다.

Request와 Response는 클라이언트가 요청을 보냈을때 생성되고 요청이 유지되는 동안만 Request와 Response 객체가 유지된다.

👉 Encoding: 정보를 주고 받을 때 문자를 맞춰주는 Encoding이 필수이다. Encoding 방식이 맞지 않으면 문자가 제대로 출력되지 않는다.

Request Encoding
- request.setCharacterEncoding("utf-8");
Response Encoding
- response.setContentType("text/html; charset=utf-8");

📎 Request 정보 호출

Parameter로 저장된 값을 가져온다. 리턴값은 모두 String(문자열)이다. 정수 데이터 타입일 경우 형변환을 해주어야 한다.

👉 request.getParameter("name"); : name="name" key 값이 name의 객체의 value를 가져온다.
👉 request.getParameterValue("list");:name="list" 인 배열을 가져온다.
👉 request.getParameterNames();: request에 저장된 파라미터들의 모든 이름을 배열로 가져온다.
👉 request.getAttribute("name");: attribute로 저장된 값을 가져온다. 리턴값은 모두 Object 이다. 사용시 형변환은 필수이다.

📌 2. Form을 이용한 데이터 전송 예시

📎 예시(1)

👉 데이터를 입력받는 JSP 파일

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 전송 기초1</title>
<script>
	function sendData() {
		document.f.submit(); // submit()메서드를 사용하여 데이터를 전송한다.
	}
</script>
</head>
<body>
	
	<form action="formEx01Pro.jsp" name="f"> <!-- action속성 값에 데이터를 전송할 목적지를 작성한다. -->
		<fieldset>
			<p>
				가장 자신있는 프로그래밍 언어 : 
				<input type="text" name="language">
			</p>
			<p>
				자신있는 이유 : <br>
				<textarea name="reason"></textarea>
			</p>
			<p>
				공부했던 프로그래밍 언어의 개수 :
				<input type="text" name="languageCount">
			</p>
			
			<p>	
				<!-- 데이터 전송 방법 1) submit 타입을 사용하여 전송한다. (가장 일반적인 방법) -->
				<input type="submit" value="전송">
				
				<!-- 데이터 전송 방법 2) 자바스크립트를 이용하여 전송한다. ( form의 name속성값이 있어야 한다. )-->
				<input type="button" value="전송" onclick="sendData()">	
			</p>
			
		</fieldset>
	</form>
	
</body>
</html>

👉 폼 전송을 통해 데이터를 받는 JSP 파일

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 전송 기초1</title>
</head>
<body>

	<% 
	
		request.setCharacterEncoding("utf-8");
		
		String language      = request.getParameter("language");
		String reason        = request.getParameter("reason");
		int languageCount    = Integer.parseInt(request.getParameter("languageCount")); 
        // 정수타입인 경우 형변환 해주어야한다.
	
		System.out.println("자신 있는 언어 : " + language);
		System.out.println("자신 있는 이유 : " + reason);
		System.out.println("공부하였던 언어의 개수 : " + languageCount);
        // Console에 출력되는 데이터
		
	%>

	<h3>데이터 전송 확인</h3>
	<a href="formEx01.jsp">이전으로 이동하기</a>

</body>
</html>

📎 예시(2)

👉 데이터를 입력받는 JSP 파일

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 전송 데이터</title>
</head>
<body>

	<h2>form 전송 데이터 </h2>

	<form method="post" action="formEx02Pro.jsp">
	
		1. 텍스트 : <input type="text" name="data1"><hr>
		2. 패스워드 : <input type="password" name="data2"><hr>
		3. 라디오 : <input type="radio" name="data3" value="1"> 1 &emsp; 
					<input type="radio" name="data3" value="2"> 2 &emsp;
					<input type="radio" name="data3" value="3"> 3 &emsp;<hr>
		4. 셀렉트 : <select name="data4">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select><hr>
		5. 체크박스 : <input type="checkbox" name="data5" value="1"> 1 &emsp;
					  <input type="checkbox" name="data5" value="2"> 2 &emsp;
					  <input type="checkbox" name="data5" value="3"> 3 &emsp;<hr>
		6. 텍스트에어리어 : <textarea rows="5" cols="30" name="data6"></textarea><hr>
		7. 히든 : <input type="hidden" name="data7" value="브라우저에는 보이지 않습니다." name="data7"><hr>
		8. 이메일 : <input type="email" name="data8"><hr>
		9. 날짜 : <input type="date" name="data9"><hr>
		10.숫자 : <input type="number" name="data10"><hr>
		<input type="submit" value="전송">
	</form>

</body>
</html>

👉 폼 전송을 통해 데이터를 받는 JSP 파일

<head>
<meta charset="UTF-8">
<title>데이터 전송 기초</title>
</head>
<body>
	 
	<% 
	
		request.setCharacterEncoding("utf-8");
	 
		String data1 = request.getParameter("data1");
		String data2 = request.getParameter("data2");
		String data3 = request.getParameter("data3");
		String data4 = request.getParameter("data4");
		String[] data5 = request.getParameterValues("data5");
		String data6 = request.getParameter("data6");
		String data7 = request.getParameter("data7");
		String data8 = request.getParameter("data8");
		String data9 = request.getParameter("data9");
		String data10 = request.getParameter("data10");

	%>
	
	<fieldset>
		<p>1. 텍스트 : <%=data1 %></p>
		<p>2. 패스워드 : <%=data2 %></p>
		<p>3. 라디오 : <%=data3 %></p>
		<p>4. 셀렉트 : <%=data4 %></p>
		<p>5. 체크박스 : 
			<% 
				for(int i = 0; i<data5.length; i++) {
					out.println(data5[i]);
				}
			%>
		</p>
		<p>6. 텍스트에어리어 : <%=data6 %></p>
		<p>7. 히든 : <%=data7 %></p>
		<p>8. 이메일 : <%=data8 %></p>
		<p>9. 날짜 : <%=data9 %></p>
		<p>10. 숫자 : <%=data10 %></p>
	</fieldset>
	   
</body>
</html>

Author And Source

이 문제에 관하여(JSP Form 데이터 전송), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alicesykim95/JSP-Form

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JSP Form 데이터 전송