FormData

✅ 자바스크립트에서 HTML 폼 데이터를 쉽게 관리하고, 이를 AJAX 요청으로 전송할 때 사용

활용 시점

• AJAX 요청으로 폼 데이터 전송할 때 사용 (서버에 비동기 데이터 전송할 때 사용)
• 파일업로드 로 선택된 파일을 서버로 전송할 때 사용
• 기존 HTML 폼 외에 추가 데이터를 동적으로 삽입하여 서버에 전송할 때 사용

예시 (1)

• HTML 폼 데이터를 자동으로 처리하므로 별도의 파싱 작업이 필요없음

<form id="myForm">
    <input type="text" name="username" placeholder="사용자 이름">
    <input type="email" name="email" placeholder="이메일">
    <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
    function submitForm() {
        // FormData 객체 생성
        var form = document.getElementById("myForm");
        var formData = new FormData(form);

        // AJAX 요청으로 데이터 전송
        fetch('/submit', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            console.log("응답:", data);
        })
        .catch(error => {
            console.error("오류 발생:", error);
        });
    }
</script>

예시 (2)

• 파일 데이터를 쉽게 관리하고 서버로 전송 가능

<form id="uploadForm">
    <input type="file" name="file"> <!-- 파일 업로드 -->
    <button type="button" onclick="uploadFile()">Upload</button>
</form>

<script>
    function uploadFile() {
        // FormData 객체 생성
        var form = document.getElementById("uploadForm");
        var formData = new FormData(form);

        // AJAX 요청으로 파일 업로드
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log("업로드 성공:", data);
        })
        .catch(error => {
            console.error("업로드 실패:", error);
        });
    }
</script>

예시 (3)

• 기존 폼 데이터 외에도 추가 데이터를 삽입 가능

<form id="dynamicForm">
    <input type="text" name="username" placeholder="사용자 이름">
</form>

<script>
    function submitDynamicForm() {
        // FormData 객체 생성
        var form = document.getElementById("dynamicForm");
        var formData = new FormData(form);

        // 동적 데이터 추가
        formData.append("age", 25);
        formData.append("location", "Seoul");

        // AJAX 요청으로 데이터 전송
        fetch('/submit', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            console.log("응답:", data);
        })
        .catch(error => {
            console.error("오류 발생:", error);
        });
    }

    submitDynamicForm();
</script>

✅ 몰랐던 부분

FormData 객체에 파일업로드 부분을 안넣고 일반 값들만 담아도
서버에서 @ModelAttribute 로 받을 수 있을 까?

결론적으로는 불가능하다

그 이유는 @ModelAttribute 는 기본적으로 application/x-www-form-urlencoded 또는
application/json 와 같은 key=value 구조의 요청에서만 바인딩이 가능하다

하지만 FormData 객체를 만들어 일반값만 ajax 요청으로 보내더라도 그것은 자동으로
multipart/form-data 형식으로 전송이 되기 때문에

@ModelAttribute 가 받을 수 없다

그럼 서버에서 @ModelAttribute 로 받으려면 어떻게 해결을 해야할까?

1. 서버에서 @RequestParam 으로 하나씩 받기
2. HttpServletRequest 로 직접 꺼내기
3. 서버에 데이터를 보낼 때 FormData 를 사용하지 않고, key=value 값으로 전송하기

@PostMapping("/user/productRegistEnd") 
public String regist( // (1)
    @RequestParam String title,
    @RequestParam String subCate,
    @RequestParam int price,
) {
    // 필요한 처리
    return "ok";
}

@PostMapping("/user/productRegistEnd")
public String regist(HttpServletRequest request) { // (2)
    String title = request.getParameter("title");
    // ...
    return "ok";
}

$.ajax({
    url: "/user/productRegistEnd",
    type: "post",
    data: {
        title: $(".inputTitle").val(),
        subCate: $(".middleCate").val(),
        // ...
    },
    success: function() { ... }
});

결론적으로는 파일이 포함된 FormData 를 서버에서 받을 때 무조건 @RequestParam 를 사용하자