2024.07.04 JSP 프로그래밍 기본 폼 처리와 요청 방식

Java

2024.07.04 JSP 프로그래밍 기본 폼 처리와 요청 방식

정훈5 2024. 7. 4. 14:57

<aside>
💡 학습 목표

1. **GET 요청 방식과 정적 컨텐츠의 개념과 사용법을 이해한다.**
2. **Form 태그를 사용하여 POST 요청을 보내는 방법을 익힌다.**
3. **POST 요청을 처리하는 서블릿 파일을 작성할 수 있다.**
</aside>

GET 요청 방식과 정적 컨텐츠

GET 요청: 클라이언트가 서버로 데이터를 요청할 때 사용되는 HTTP 요청 방식입니다. URL에 파라미터를 포함하여 요청할 수 있으며, 주로 정적 컨텐츠를 요청하는 데 사용됩니다.
정적 컨텐츠: 서버에서 변경되지 않는 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 클라이언트에 제공하는 것입니다.

특징

GET 요청은 URL에 데이터를 포함하여 전송합니다.
브라우저의 주소창에 직접 입력하거나 링크를 클릭하여 GET 요청을 보낼 수 있습니다.
GET 요청은 주로 데이터를 조회하거나(동적 데이터) 정적 리소스를 요청할 때 사용됩니다.

<a href="search.jsp?query=JSP">Search JSP</a>

Form 태그와 POST 요청

개념

Form 태그: 사용자가 입력한 데이터를 서버로 전송하기 위해 사용하는 HTML 태그입니다.
POST 요청: 클라이언트가 서버로 데이터를 전송할 때 사용되는 HTTP 요청 방식입니다. 폼 데이터를 보낼 때 주로 사용됩니다.
GET 요청: 클라이언트가 서버로부터 데이터를 요청할 때 사용되는 HTTP 요청 방식입니다. 주로 조회 작업에 사용됩니다.

특징

POST 요청:
- URL에 데이터를 포함하지 않고, 요청 본문(HTTP 메세지)에 데이터를 포함하여 전송합니다.
- 폼 태그를 사용하여 사용자 입력 데이터를 서버로 전송할 수 있습니다.
- 주로 데이터의 생성, 수정, 삭제와 같은 작업을 수행할 때 사용됩니다.
- 보안 측면에서 GET 요청보다 안전합니다, 특히 민감한 데이터를 전송할 때.
GET 요청:
- URL에 데이터를 포함하여 전송합니다.
- 브라우저의 주소창에 직접 입력하거나 링크를 클릭하여 GET 요청을 보낼 수 있습니다.
- 주로 데이터 조회 작업을 수행할 때 사용됩니다.
- URL에 데이터가 포함되기 때문에, 중요한 정보를 전송하는 데는 적합하지 않습니다.

시나리오 코드 1

class_jsp_v04 폴더

index.jsp

result.jsp

css / styless.css

image / favicon.png

styless.css

@charset "UTF-8";

body {
	background-color: #f4f4f4;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.container {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h2 {
	margin-bottom: 20px;
}

form>label {
	
	display: inline-block;
	margin-bottom: 15px;
}

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/styless.css">
<link rel="icon" href="image/favicon.png" type="image/x-icon">
</head>
<body>
	<div class="container">
		<h2>폼 예제</h2>
		<form action="result.jsp" method="POST">
			
			<label for="username">Username: </label>
			<input type="text" id="username" name="username" value="야스오">
			<br> <br>
			
			<label>취미를 선택하세요</label> <br>
			
			<input type="checkbox" id="bobby1" name="hobbies" value="축구">
			<label for="bobby1">축구</label> <br>
			
			<input type="checkbox" id="bobby2" name="hobbies" value="농구">
			<label for="bobby2">농구</label> <br>
			
			<input type="checkbox" id="bobby3" name="hobbies" value="독서">
			<label for="bobby3">독서</label> <br>
			
			<input type="checkbox" id="bobby4" name="hobbies" value="코딩">
			<label for="bobby4">코딩</label> <br>
			
			<button type="submit">제출</button>
			
		</form>
	</div>

</body>
</html>

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>폼 제출 결과 확인 페이지</h1>
	
	<%
		String username = request.getParameter("username");
		String[] hobbies = request.getParameterValues("hobbies");		
		out.print("xxxx " + hobbies.length);
		out.print("이름 " + username);
	%>

</body>
</html>

result.jsp

<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>폼 제출 결과 확인 페이지</h1>
	
	<%
		String username = request.getParameter("username");
		String[] hobbies = request.getParameterValues("hobbies");
		String faColor = request.getParameter("favoriteColor");
	//	out.print("xxxx " + hobbies.length);
	//	out.print("이름 " + username);
	%>
	
<p>Username : <%= username %> </p>
 	
	<%
		if(hobbies != null) {
			
	%>
		<!-- html 영역   -->
		<p>Hobbies : </p>
		<ul>
			<% for(String bobby : hobbies) { %>
			<li><%= bobby %></li>
			<%} %>
		</ul>		
	<%} else {%>
	
		 <!-- HTML 영역 -->
		 <p>선택된 취미가 없습니다.</p>
	<%		
		}
		
	%>
	<ul>
		<li></li>
		<li></li>
	</ul>
	
	<p> color : <%= faColor != null ? faColor : "선택한 색상이 없네요" %>

</body>
</html>

'Java' 카테고리의 다른 글

2024.07.05 JSP 프로그래밍 기본 서블릿과 JSP의 개념과 차이점 (0)	2024.07.05
2024.07.04 JSP 프로그래밍 기본 쿠키와 세션 관리 (0)	2024.07.04
2024.07.04 JSP 프로그래밍 기본 JSP 내장 객체란 뭘까? (0)	2024.07.04
2024.07.04 JSP 프로그래밍 기본 JSP 지시자(Directive) 간단 정리 (0)	2024.07.04
2024.07.03 JSP 프로그래밍 기본 JSP 기본 태그 (스크립트릿, 선언, 표현식) (0)	2024.07.03

현재글2024.07.04 JSP 프로그래밍 기본 폼 처리와 요청 방식

정훈5

변수(variable), 데이터 타입(Data Type) (논리형), Light shot 설치, lombok, corretto JDK 17, Eclipse 설치 및 설정, Flutter, 데이터 타입(Data Type), 데이터 타입(Data Type) (문자형), Widget, Eclipse 설정, java, corretto JDK17, 데이터 타입(Data Type) (실수형), sprint tool suite, Jakarta, AndroidStudio, 데이터 타입(Data Type) (정수형), 이클립스 폰트 설정, Tomcat,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

정훈5

2024.07.04 JSP 프로그래밍 기본 폼 처리와 요청 방식

GET 요청 방식과 정적 컨텐츠

Form 태그와 POST 요청

개념

특징

'Java' 카테고리의 다른 글

'Java'의 다른글

티스토리툴바

2024.07.04 JSP 프로그래밍 기본 폼 처리와 요청 방식

GET 요청 방식과 정적 컨텐츠

Form 태그와 POST 요청

개념

특징

'Java' 카테고리의 다른 글

'Java'의 다른글

관련글

티스토리툴바