[Javascript] FormData 객체의 사용

0. FormData 객체

FormData 객체는 HTML 폼 데이터를 나타낸다. 쉽게 말하자면, 간편하게 폼을 전송할 수 있도록 해주는 객체이다.

 

FormData를 사용하면 자바스크립트로도 HTML에서 사용하는 폼 태그를 작성할 수 있다.

 

let emptyFormData = new FormData();
emptyFormData.append('name1', 'value1'); // 추가 : 같은 name을 가진 값이 있으면 추가하지 않음
emptyFormData.set('name2', 'value2'); // 추가 : 같은 name을 가진 값이 있으면 덮어씀
emptyFormData.delete('name1'); // 삭제
emptyFormData.get('name2'); // 조회
emptyFormData.has('name1'); // 확인 : true / false

const testForm = document.querySelector('#formId');
let formData = new FormData(testForm);

 

 

AJAX 등과 같은 비동기 방식으로 폼 데이터를 전송해야할 때 편리하다. 다음은 fetch를 사용하여 FormData를 서버에 전송하는 코드이다. 주의할 점은 FormData를 JSON으로 변환하지 않고 그대로 전송해야한다는 점이다. 

 

const formData = new FormData(document.form);

fetch('/test/insert?${_csrf.parameterName}=${_csrf.token}', {
    method: 'post',
    body: formData
});

 

 

위 코드를 통해 서버로 전송된 FormData는 재미있게도 Content-Type이 multipart/form-data 이다. 이 때문에 스프링의 컨트롤러에서는 @ModelAttribute 나 @RequestParam 어노테이션을 사용해 데이터를 수신하게 된다.

 

@ResponseBody
@PostMapping("/test/insert")
public void insert(@ModelAttribute TestVO testVO, @RequestParam String name1){

    ...

}