JSP

폼 처리와 요청 방식

DDG9 2024. 7. 4. 16:26

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

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/styles.css">
<link rel='icon' type="image/x-icon" href="image/cnstlr.png">
</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="hobby1" name="hobbies" value="축구">
			<label for="hobby1">축구</label><br>
			
			<input type="checkbox" id="hobby2" name="hobbies" value="농구">
			<label for="hobby2">농구</label><br>
			
			<input type="checkbox" id="hobby3" name="hobbies" value="독서">
			<label for="hobby3">독서</label><br>
			
			<input type="checkbox" id="hobby4" name="hobbies" value="코딩">
			<label for="hobby4">코딩</label><br>
			
			<hr>
			<label>좋아하는 색을 선택하세요:</label><br>
			<input type="radio" id="color1" name="favoriteColor" value="빨강">
			<label for="color1">빨강</label>
			<input type="radio" id="color2" name="favoriteColor" value="파랑">
			<label for="color2">파랑</label>
			<input type="radio" id="color3" name="favoriteColor" value="초록">
			<label for="color3">초록</label><br>
			
			<button type="submit">제출</button>
		</form>
	</div>
</body>
</html>

 

css/styles.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;
}

 

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");
	String faColor = request.getParameter("favoriteColor");
	%>

	<p>
		Username:
		<%=username%>
	</p>

	<%
	if (hobbies != null) {
	%>
	<!-- html 영역 -->
	<p>Hobbies :</p>
	<ul>
		<%
		for (String hobby : hobbies) {
		%>
		<li><%=hobby%></li>
		<%
		}
		%>
	</ul>
	<%
	} else {
	%>

	<!-- html 영역 -->
	<p>선택된 취미가 없습니다</p>

	<%
	}
	%>
	
	<p> color : <%=faColor != null ? faColor : "선택한 색상이 없네요" %></p>
</body>
</html>