본문 바로가기

프로그래밍

html form 태그를 이용한 여러 데이터 넘기기 동작

개인적으로 어떤 언어를 쓰던 유달리 파일다루기, 소켓다루기, 쓰레드 제어를 매번 어려워합니다.
이참에 아에 끝장을 보자는 식으로 가장 보편적인 form 태그를 이용한 
데이터 전송 작업과 name으로 묶여 있는 데이터들을 다루는 방법을 정리해보겠습니다.

우선 데이터를 어떻게 받고 던질지를 정해보겠습니다.


form이 여러개인 형태(1번 형태라고 하겠습니다)와


 form 하나에서 input들을 나열하는 형태(2번 형태라고 하겠습니다) 중에 하나를 택하기로 했습니다.
(제가 아는게 여기까지라 혹시 다른 패턴이 있다면 알려주시면 감사하겠습니다)




1번 형태는 일반적인 방법으로는 안되고 ajax를 이용해야만 가능합니다.
그렇다는 것은 처리하는 페이지를 form 수만큼 호출해야한다는 것인데 비효율적일 것 같습니다.
탈락!


2번 형태로 진행하겠습니다.
javascript formname.submit()을 하면 알아서 정리해서 가져오니 상당히 편리합니다.
위에 형태대로라면 submit()시의 결과는 아래와 같이 담기게 됩니다.


좌르르르륵 데이터가 담겨 있는 모습이 보입니다.
이 화면은 submit() 직전의  form을 본 것이기 때문에 모조리 다 들어가 있습니다.
모조리 다 갖고 온 것이지만, submit() 후 컨트롤러로 넘어가게 되면 결과적으로 
disabled 속성을 가진 값들은 넘어오지 않게 됩니다.

아래 사진은 넘어온 값들을 사용하기 편리하게 controller에서 담아둔 형태입니다.



이런 식으로 원할하게 사용할 수 있도록 데이터를 가공하기 전에 넘어온 데이터들이 어딨는지 알아야합니다.
까먹기 적에 우선 지금 어디까지 왔는지 알아보겠습니다.

1. 데이터를 입력받고 넘길 form을 형성했습니다.
<!--name을 통해 frm에 접근할 수 있도록 하고 POST로 action을 잡음으로써 form데이터를 넘기도록 하는데, enctype를 multipart/form-data로 설정하여
파일 정보도 넘기고, 이런 form데이터를 처리하는 위치는 /respondpage에서 한다고 선언하였습니다-->
<form name=frm action='POST" enctype="multipart/form-data" action="/respondpage">
<input> ...
</form

2. javascript로 form데이터를 전송합니다.
<script>
만약 특정 데이터들은 안넘기고 싶다면 이부분에 disabled 속성을 넣어주는 동작실행.
어떤 동작을 하면 frm.submit();

</script>

주절 주전 썻지만 단순히 페이지의 데이터를 넘기는 수준까지만 왔습니다.
넘겨진 데이터들을 컨트롤 하는 것은 다음 포스팅에 다뤄보겠습니다.
좀 길어지니 집중을 위해 다음 포스팅으로 넘기겠습니다~