12주차 - jsp (10) getParameterValues() 로 다중 선택이 가능한 <input>의 값을 출력하기

2022. 9. 21. 21:14jsp/jsp

이번의 목표

01. getParameter() 를 사용하여 <input type="checkbox"> 의 값을 출력해보자.

02. method="post"일때 한글이 깨지는 것을 해결해보자.


지난 시간에는 getParameter() 를 사용해 <input type="text"> 의 값을 출력해봤습니다.

이번에는 <input type="checkbox">의 값을 받아오는 것을 해보겠습니다.

"checkbox", "radio"는 값을 받아오기 위해서는 <input>에 value 값이 설정되어 있어야합니다.

checkbox는 일반적으로 다중 선택이 가능하도록 되어있습니다.

그렇기 때문에 <input type="text">의 값을 받아올 때와 같은 메서드를 사용하게 된다면 사용자가  선택한 것중 첫번째 선택지만 출력이 됩니다.

그렇기 때문에 checkbox 값을 문자열 배열로 받아야합니다.

배열로 받을때의 메서드는 getParameterValues() 이며 사용 예시는 아래와 같습니다.

String likes[] = request.getParameterValues("like");

이후, 반복문을 이용하여 출력하면 사용자가 다중 체크를 했을 때 값을 모두 출력할 수 있습니다.

배열을 사용하는 방법이 가능한것과 마찬가지로 컬렉션을 사용할 수도 있습니다.

컬렉션을 사용하는 코드의 예시는

Arrays.toString(likes)

 

그리고 데이터 전달 메서드가 get일 때에는 그대로 받아서 출력해도 한글이 깨지지 않지만,

post 일때에 받은 그대로 출력하면 한글이 깨져서 출력됩니다.

이는 post로 전달하면 인코딩이 바뀌기 때문입니다. 이를 해결 하기 위해서 인코딩을 바꿔줄 필요가 있습니다.

이때 사용하는 메서드는 setCharacterEncoding() 입니다.

사용 예시는 아래와 같습니다.

request.setCharacterEncoding("UTF-8");

사용 예시라고 말했지만 실질적으로 한글을 출력하기 위해서는 인코딩을 UTF-8로 사용해야 하기 때문에,

메서드가 post 일때는 항상 위의 코드로 사용하면 된다 생각하면 쉽겠습니다.

 

01. 데이터 전송 페이지 코드
02. 데이터 출력 페이지 코드
03. 실행 화면

01. 데이터 전송 페이지 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex03_form</title>
</head>
<body>
	<form action="ex03_result.jsp" method="post">
		<input type="text" name="name"><br>
		<input type="text" name="address"><br>
		<input type="checkbox" name="like" value="후라이드 치킨">후라이드 치킨<br>
		<input type="checkbox" name="like" value="양념 치킨">양념 치킨<br>
		<input type="checkbox" name="like" value="간장 치킨">간장 치킨<br>
		<input type="submit" value="전송">
		<input type="reset" value="취소">
	</form>
</body>
</html>

02. 데이터 출력 페이지 코드

<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex03_result</title>
</head>
<body>
	<%
		//데이터 전달 메서드가 post라면 http body에 담겨있는 데이터 인코딩을 재 지정해야함
		request.setCharacterEncoding("UTF-8");
	%>
	이름 : <%= request.getParameter("name") %><br>
	주소 : <%= request.getParameter("address") %><br>
	좋아하는 메뉴 : <%= request.getParameter("like") %><br>
	<br>	
	<%
		String likes[] = request.getParameterValues("like");
		for(String like : likes){
			out.print("메뉴 : " + like + "<br>");
		}
		out.print("<br><br>");
	%>
	취미 : <%= Arrays.toString(likes) %>
</body>
</html>

03. 실행 화면

① checkbox의 값을 getParameter() 로 출력했을 때에는 첫번째 값만 출력되는 것을 확인할 수 있습니다.

② 배열을 이용하여 데이터를 받고, 이를 반복문을 사용하여 출력한 값이 나오는 것을 확인할 수 있습니다.

③ 컬렉션을 사용하여 값을 출력되는 것을 확인할 수 있습니다.