다연이네

[days02] form태그 없이 입력값 전달 / 서블릿 만들기(구체적) + post 한글 깨짐 현상 본문

JSP

[days02] form태그 없이 입력값 전달 / 서블릿 만들기(구체적) + post 한글 깨짐 현상

　다연　 2020. 12. 23. 18:37
반응형

form태그 없이 입력값 전달

 

원래는 form 태그 안에 있어야 입력값들이 submit되어진다. 
form태그를 안 만들었을 때 어떻게 값들을 전송시킬건지 ? => 파라미터 값을 달아서 보내라

 

예시) form 태그 없이 a태그를 통해 링크 전달 (입력값까지의 자연수 덧셈)

각각 a태그를 누르면 계산되어지고 ->  다시 이전 화면으로 돌아가진다. <-

 

re01.jsp

<body>
  
  <div id="tabs-1">
     정수 입력 : <input type="text" name="num" id="num" value="10" />
    <br>
   <a href="/jspPro/re01/test00_ok.jsp" id="link">test00_ok.jsp</a> 
  </div>
 
  <script>
  $(function() {
  $("#link").on("click", function(event) {
  	$(this).attr("href",function(i,val){
  		return val+"?num="+$("#num").val();
  	});
  	});
  })
</script>
</body>

또 다른 jquery 방법으로는 밑에가 있다. (위처럼 하는 것 추천)

 <script>
 $(function() {
  $("#link").on("click", function(event) {
  	$(this).attr("href",$(this).attr("href")+"?num="+$("#num").val());
  });
 });
</script>

test00_ok.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	int num;
	String output = "";
	int sum=0;
	try{
		num = Integer.parseInt(request.getParameter("num"));
		
		for(int i=1;i<=num;i++){
			output+= i==num? i : i+"+";
			sum+=i;
		}
		output+= "="+sum;
	}catch(Exception e){
		
	}
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
	  
   });
</script>
</head>
<body>
<div id="demo"><%=output %></div>

<a href="ex01.jsp">다시하기</a>
</body>
</html>

 

 

 

서블릿 만들기 

 

이름과 나이를 입력받아 서블릿으로 넘겨주기

 

re01.jsp

<body>
 <script>
 $(function() {
	$("form").submit(function(event) {
		$(this).attr("action", "http://localhost/jspPro/review");
	})
})
 </script>

<div>
 <form action="" method="post">
   Name : <input type="text" id="name" name="name" autofocus="autofocus" /><br>
   Age :  <input type="text" id="age" name="age" />
   <button type="submit">전송</button>
 </form> 
</div>
</body>

Review.java

package days02;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Review02 extends HttpServlet {

	/*
	@Override
	protected void doGet(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		
	}

	@Override
	protected void doPost(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		
	}
*/
	@Override
	protected void service(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.append("service 호출됨");
	}
	
}

web.xml에 해당 코딩 추가

<servlet>
  <servlet-name>review</servlet-name>
  <servlet-class>days02.Review02</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>review</servlet-name>
  <url-pattern>/review</url-pattern>
</servlet-mapping>

 

전송 버튼을 누르면 http://localhost/jspPro/review라는 URL로 이동한다.

 

다시, java 파일의 service를 주석처리하고 나머지를 주석을 풀어본다. (항상 서블릿 수정 후에는 서버를 restart 해주자)

package days02;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Review02 extends HttpServlet {

	
	@Override
	protected void doGet(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.append("doGet 호출됨");
	}

	@Override
	protected void doPost(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.append("doPost 호출됨");
	}

	/*@Override
	protected void service(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.append("service 호출됨");
	}
    
   	 얘가 있을 경우 get이든 post이든 다 얘가 호출됨
	*/
}

 

 re01.jsp에서 

<form action="" method="get">인 경우 doGet 호출됨이라고 출력되고

 

    <form action="" method="post">인 경우 doPost 호출됨이 출력된다.

 

 

 

 

다시, java 파일을 매개변수를 넘겨받아 출력하도록 수정해보자

package days02;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Review02 extends HttpServlet {

	
	@Override
	protected void doGet(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		
		Date now = new Date();
		out.append(String.format(">name:%s <br> >age:%d <br> >now:%s"
        	, name, age, now.toLocaleString()));
	}

	@Override
	protected void doPost(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

	@Override
	protected void service(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
	
}

 

 

get 방식

post 방식

form태그의 메소드가 get방식일때는 정상적으로 출력되나, 메소드가 post방식일 경우에는 한글이 깨져서 나온다.

이 이유는 무엇일까? 위의 해답을 알기 위해선 contentType의 UTF-8과 pageEncoding의 UTF-8의 차이를 알아야 한다.

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

톰캣과 같은 컨테이너는 JSP 코드를 분석하는 과정에서 어떤 인코딩을 이용해서 코드를 작성했는지 검사하며, 

그 결과로 선택한 캐릭터 셋을 이용해 JSP 페이지의 문자를 읽어온다.

웹 컨테이너가 JSP페이지를 읽어올때 사용할 캐릭터 셋 = pageEncoding이고
응답할 때는 contentType (MIME, 마메라고함 ) 이다.
contentType과 똑같은 코딩 == 서블릿의  response.setContentType("text/html; charset=UTF-8");

 

우리는 java 파일 안에 response.setContentType("text/html; charset=UTF-8"); 은 넣어줬는데, 읽어올 때 인코딩 값은 안 넣어줬기 때문에 넣어줘야 한다.

request.setCharacterEncoding("UTF-8");

위 한 줄을 추가하자.

@Override
	protected void doGet(HttpServletRequest request, 
    HttpServletResponse response) throws ServletException, IOException {
    
		request.setCharacterEncoding("UTF-8"); //추가 (읽어올 때 인코딩)
		response.setContentType("text/html; charset=UTF-8");
		
		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		
		Date now = new Date();
		out.append(String.format(">name:%s <br> >age:%d <br> >now:%s"
        	, name, age, now.toLocaleString()));
	}

보낼때 response 읽을때 request 꼭 기억하자

 

 

그런데 왜 get 방식일때는 안망가지는걸까?

get방식은 자동으로 디폴트값이 UTF-8이다 (post는 iso88~어쩌구인 반면)

( 그리고 톰캣이 7버전(낮은 버전)이면 get도 깨진다 ) 

 

 

반응형
저작자표시 비영리

'JSP' 카테고리의 다른 글

[days02] 요청 파라미터를 처리하는 메소드 / request 요청 헤더 정보  (0) 2020.12.23
[days02] 1) 표현언어 / 2)JSP 페이지 구성요소 / 3) request  (0) 2020.12.23
[days01] <% %> 사용해보기  (0) 2020.12.22
[days01] 지시자와 서블릿(Survlet) + 서블릿 맵핑  (0) 2020.12.22
[days01] 첫 시작부터 정리  (2) 2020.12.22
'JSP' Related Articles more
Comments