javascript FORM 태그 시리얼라이징

개요

AJAX API 호출을 위하여 FORM 태그의 여러 INPUT 컨트롤의 입력 정보를 모아서 호출하려면, jQuery를 이용할 경우 다음과 같이 작성하게 됩니다.

form_data = 'user_name=' + $('#user_name') + '&passowrd=' + $('#password')
        //+ ...

위와 같이 INPUT 컨트롤의 ID로 직접 값을 가져오는 방식은 컨트롤의 개수가 적을 때는 크게 문제가 되지 않지만, 수 십개가 넘어가게 되면 노가다?가 되어 버립니다.
중간에 오타라도 있다면 재앙이 시작됩니다. ^^;

FORM의 모든 INPUT 태그를 getElementsByTagName() 함수로 얻어, forEach 하는 방식도 이용할 수 있겠으나, 어쨌든 관련 로직을 이해하고 코딩을 직접 해주어야만 합니다.

이에 대한 해결책이 FormData 인터페이스입니다.

FormData 인터페이스란?

FormData 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다.

또한 XMLHttpRequest.send() 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 "multipart/form-data"로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.

간단한 GET 전송을 사용하는 경우에는 FORM 이 수행하는 방식으로 쿼리 매개 변수를 생성할 수 있습니다. 이 경우 URLSearchParams 생성자에 직접 전달하여 파라미터 문자열을 만들 수 있습니다.

사용 예

다음과 같이 개발자 도구에서 회원가입 창이 있는 곳에서 FormData 인터페이스를 이용하여 GET, POST에 이용할 쿼리 매개변수 문자열을 만들 수도 있고, JSON 형식의 문자열도 만들 수 있습니다.

> form = document.forms[0];

​
> var form_data = new FormData(form);
undefined
> form_data
FormData {}[[Prototype]]: FormDataappend: ƒ append()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()getAll: ƒ getAll()has: ƒ has()keys: ƒ keys()set: ƒ ()values: ƒ values()constructor: ƒ FormData()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "FormData"[[Prototype]]: Object
> document.querySelector('#seller_no1').value
'124'
> var url_form_data = new URLSearchParams(new FormData(form)).toString()
undefined
> url_form_data
'seller_no1=124&seller_no2=12&seller_no3=45235&password=asdfasdf'
> var object = {};
undefined
> form_data.forEach((value, key) => object[key] = value);
undefined
> var json_string = JSON.stringify(object);
undefined
> json_string
'{"seller_no1":"124","seller_no2":"12","seller_no3":"45235","password":"asdfasdf"}'

위와 같이 FormData 인터페이스를 이용하면 아주 손쉽게 폼 파라미터를 생성할 수 있습니다.

앞으로 AJAX 이용시 폼으로 전달할 파라미터들은 무조건 FORM 태그로 감싸주고, FormData 인터페이스를 적용활용 하도록 해야겠습니다.

참고로 실무에 적용해 보니, 전달된 파라미터가 저장되는 테이블 컬럼명하고 FORM의 각 INPUT의 id 및 name 이름 및 RESTful API의 JSON 응답 결과의 키 문자열을 동일하게 맞추어야 바로 손쉽게 적용이 가능하였었습니다.

참고자료

https://stackoverflow.com/questions/11661187/ ; form serialize javascript (no framework)
https://stackoverflow.com/questions/41431322/ ; How to convert FormData (HTML5 object) to JSON
https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByTagName
https://developer.mozilla.org/ko/docs/Web/API/FormData