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>