목차
1. GET 요청 방식과 정적 컨텐츠
- GET 요청: 클라이언트가 서버로 데이터를 요청할 때 사용되는 HTTP 요청 방식. URL에 파라미터를 포함하여 요청할 수 있으며, 주로 정적 컨텐츠를 요청하는 데 사용된다.
- 정적 컨텐츠: 서버에서 변경되지 않는 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 클라이언트에 제공하는 것.
특징
- GET 요청은 URL에 데이터를 포함하여 전송.
- 브라우저의 주소창에 직접 입력하거나 링크를 클릭하여 GET 요청을 보낼 수 있다.
- GET 요청은 주로 데이터를 조회하거나(동적 데이터) 정적 리소스를 요청할 때 사용된다.
<a href="search.jsp?query=JSP">Search JSP</a>2. Form 태그와 POST 요청
개념
- Form 태그: 사용자가 입력한 데이터를 서버로 전송하기 위해 사용하는 HTML 태그이다.
- POST 요청: 클라이언트가 서버로 데이터를 전송할 때 사용되는 HTTP 요청 방식이다. 폼 데이터를 보낼 때 주로 사용된다.
- GET 요청: 클라이언트가 서버로부터 데이터를 요청할 때 사용되는 HTTP 요청 방식이다. 주로 조회 작업에 사용된다.
특징
- POST 요청:
- URL에 데이터를 포함하지 않고, 요청 본문(HTTP 메세지)에 데이터를 포함하여 전송한다.
- 폼 태그를 사용하여 사용자 입력 데이터를 서버로 전송할 수 있다.
- 주로 데이터의 생성, 수정, 삭제와 같은 작업을 수행할 때 사용된다.
- 보안 측면에서 GET 요청보다 안전하다, 특히 민감한 데이터를 전송할 때.
- GET 요청:
- URL에 데이터를 포함하여 전송한다.
- 브라우저의 주소창에 직접 입력하거나 링크를 클릭하여 GET 요청을 보낼 수 있다.
- 주로 데이터 조회 작업을 수행할 때 사용된다.
- URL에 데이터가 포함되기 때문에, 중요한 정보를 전송하는 데는 적합하지 않다.
3. 코드
<%@ 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/style.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 for="">취미를 선택하세요</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 for="">좋아하는 색을 선택하세요</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: 10px;
}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");
%>
<!-- html 영역 -->
<p>
Username :
<%=username%></p>
<%
if (hobbies != null) {
%>
<p>Hobbies :</p>
<ul>
<% for (String hobby : hobbies) { %>
<li><%= hobby %></li>
<%} %>
</ul>
<%} else {%>
<!-- html 영역 -->
<p>선택된 취미가 없습니다.</p>
<%
}
%>
<p> color : <%= faColor != null ? faColor : "선택한 색상이 없네요" %></p>
</body>
</html>
'Java > JSP' 카테고리의 다른 글
| 서블릿과 JSP의 개념과 차이점 (0) | 2024.07.05 |
|---|---|
| 쿠키와 세션 관리 (0) | 2024.07.04 |
| JSP 내장 객체란 뭘까? (0) | 2024.07.04 |
| JSP 지시자(Directive) 간단 정리 (0) | 2024.07.04 |
| JSP 기본 태그 (스크립트릿, 선언, 표현식) (0) | 2024.07.03 |