💡 학습 목표
|
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">
</head>
<body>
<div class="container">
<h2>폼 예제</h2>
<form action="result.jsp" method="post">
<label>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><br>
<input type="radio" id = "color2" name="favoriteColor" value="촉나라">
<label for="color2">촉나라</label><br>
<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 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");
%>
<p>
Username :
<%=username%></p>
<%
if (hobbies != null) {
%>
<p>Hobbies :</p>
<ul>
<%
for (String bobby : hobbies) {
%>
<li><%=bobby%></li>
<%
}
%>
</ul>
<%
} else {
%>
<p>선택된 취미가 없습니다</p>
<%
}
%>
<p> color : <%= faColor != null ? faColor : "선택한 나라가 없습니다." %>
</body>
</html>'JSP > CH03 - JSP 기본 문법과 구조' 카테고리의 다른 글
| 09. 쿠키와 세션 관리 (0) | 2024.07.05 |
|---|---|
| 07. JSP 내장 객체란 뭘까? (0) | 2024.07.04 |
| 06. JSP 지시자(Directive) 간단 정리 (0) | 2024.07.04 |
| 05. JSP 기본 태그 (스크립트릿, 선언, 표현식) (0) | 2024.07.04 |
| 4. JSP 주석과 지시자 (0) | 2024.07.03 |
