💡 학습 목표
- GET 요청 방식과 정적 컨텐츠의 개념과 사용법을 이해한다.
- Form 태그를 사용하여 POST 요청을 보내는 방법을 익힌다.
- POST 요청을 처리하는 서블릿 파일을 작성할 수 있다.
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
<%@ 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" href="image/favicon.ico" 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>
<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 bobby : hobbies) { %>
<li><%= bobby %></li>
<%} %>
</ul>
<%} else {%>
<!-- html 영역 -->
<p> 선택된 취미가 없습니다 </p>
<%
}
%>
<p> color : <%= faColor != null ? faColor : "선택한 색상이 없네요" %>
</body>
</html>
'Java > JSP' 카테고리의 다른 글
| 서블릿과 JSP의 개념과 차이점 (0) | 2024.07.15 |
|---|---|
| 쿠키와 세션 관리 (0) | 2024.07.15 |
| JSP 내장 객체란 뭘까? (0) | 2024.07.15 |
| JSP 지시자(Directive) 간단 정리 (0) | 2024.07.15 |
| JSP 기본 태그 (스크립트릿, 선언, 표현식) (0) | 2024.07.15 |
