모각코

눈이 녹으면 Spring-MVC 1월 24일 6회차

potatoo 2023. 1. 24. 17:53
728x90

오늘 할 일

POST HTML Form을 활용해서 서버로 데이터전송하는 법 익히기

이번에는 HTML의 Form을 사용해서 클라이언트에서 서버로 데이터를 전송해보자.

주로 회원 가입, 상품 주문 등에서 사용하는 방식이다.

특징

  • content-type:application/x-www-form-urlencoded
  • 메시지 바디에 쿼리 파라미터 형식으로 데이터를 전달한다. username=hello&age=20
src/main/webapp/basic/hello-form.html생성
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/request-param" method="post">
  username: <input type="text" name="username"/>
  age:      <input type="text" name="age"/>
  <button type="submit">전송</button>
</form>
</body>
</html>

쿼리 파라미터 형식과 HTML Form 형식이 같다. 따라서 request.getParameter()는 두가지 방식을 지원한다.

GET-쿼리 파라미터에서의 데이터를 꺼낼 수 있고, POST-HTML Form의 메시지 바디에 쿼리 파라미터 형식으로 전달한 username=hello&age=20의 내부 데이터도 꺼낼 수 있다.

따라서 위의 html파일에 접근하여 username과 age를 입력하고 전송하면

request-param으로 페이지가 이동하고

console창에 결과가 나온다.

결론 : application/x-www-form-urlencoded형식은 앞서 GET에서 살펴본 쿼리 파라미터 형식과 같다. 따라서 쿼리파라미터 조회 메서드를 그대로 사용하면 된다.

클라이언트(웹 브라우저)입장에서는 두 방식에 차이가 있지만, 서버 입장에서는 둘의 형식이 동일하므로,

request.getParameter()로 편리하게 구분없이 조회할 수 있다.

👉🏻정리하면 request.getParameter()는 GET URL 쿼리 파라미터 형식도 지원하고, POST HTML Form 형식도 둘 다 지원한다.

 

*참고

content-type은 HTTP 메시지 바디의 데이터 형식을 지정한다.

GET URL 쿼리 파라미터 형식으로 클라이언트에서 서버로 데이터를 전달할 때는 HTTP 메시지 바디를 사용하지 않기 때문에 content-type이 없다.

POST HTML Form 형식으로 데이터를 전달하면 HTTP 메시지 바디에 해당 데이터를 포함해서 보내기 때문에 바디에 포함된 데이터가 어떤 형식인지 content-type을 꼭 지정해야 한다. 이렇게 폼으로 데이터를 전송하는 형식을 application/x-www-form-urlencoded라 한다.

이런 간단한 테스트에 HTML form을 만들기 귀찮을 때! 이때는 Postman을 사용하면 된다.

 

Postman 테스트 주의사항

  • POST 전송시
    • Body→x-www-form-urlencoded 선택
    • Headers에서 content-type: application/x-www-form-urlencoded로 지정된 부분 꼭 확인

보낼 url주소를 입력하고 post 방식에서 body의 x-www-form-urlencoded를 선택하고 key와 value를 써서 보낸다.

즉, Postman이 test해야할 때, HTML Form의 역할을 대신 해준다.

여기서는 hello-form.html의 역할을 대신 해줬다.

 

728x90