---

웹 개발 시 jQuery 이벤트 처리와 Fetch API를 조합하여 폼 데이터를 비동기(AJAX)로 전송하고 처리하는 방식은 매우 흔히 사용됩니다. 이번 포스팅에서는 jQuery를 활용해 폼 데이터를 추출한 후 FormData 객체와 Fetch API를 통해 서버로 전송하고 응답 결과를 처리하는 JavaScript 예제 코드를 정리합니다.

1. 클릭 이벤트 및 FormData 생성 예제

버튼 클릭 이벤트가 발생했을 때 폼 내의 선택 요소(Select, Input) 값을 수집하여 FormData 객체에 담아주는 처리 스크립트입니다.

// 버튼 클릭 이벤트 리스너 등록
$(document).on('click', '#fetchbtn', (e) => {
    var year = $('#year :selected').val();
    var term = $('#term :selected').val();
    var searchText = $('#search').val();
    var id = $('#originLectureId').val();
    var mapping = $('#mapping').val();
    var section = $('#originSection').val();
    var category = $('#category').val();

    // FormData 객체 생성 및 데이터 파라미터 추가
    var formData = new FormData();
    formData.append('id', id);
    formData.append('year', year);
    formData.append('term', term);
    formData.append('mapping', mapping);
    formData.append('category', category);
    formData.append('section', section);
    formData.append('searchText', searchText);
    formData.append('fetchbtn', true);

    // 비동기 전송 함수 호출
    fetchCallHtml(formData, './contentPop/manualMappingPop.php', 'majorSearch');
});

2. Fetch API 기반 비동기 전송 함수 구현

POST 메서드를 통해 서버로 FormData를 전송하고, JSON 응답 결과를 전달받아 처리하는 비동기 통신 함수 예제입니다.

// 비동기 통신 처리 함수
function fetchCall(formData, url) {
    fetch(url, {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .catch(error => console.error('Error:', error))
    .then(string => {
        let stringData = JSON.parse(string);
        
        // 실패 처리
        if (stringData.status == 'fail') {
            alert(stringData.msg);
            return false;
        }
        
        // 성공 처리
        if (stringData.status == 'success') {
            if (stringData.type == 'manualMapping') {
                alert('완료됐습니다.');
                popup.close();
            }
            if (stringData.type == 'divisionMapping') {
                alert(stringData.msg);
            }
            console.log(url);
            location.reload();
            return false;
        }
    });
}

3. 주요 구현 특징 및 주의사항

위 스크립트 구조를 실무에서 활용할 때 유의해야 할 핵심 사항은 다음과 같습니다.

• FormData 사용: FormData 객체를 사용할 경우 fetch 요청 시 별도의 Content-Type 헤더를 지정하지 않아도 브라우저가 multipart/form-data 경계값을 자동으로 설정합니다.
• 응답 파싱: 서버 응답을 response.text()로 먼저 수신한 뒤 JSON.parse()를 거쳐 검증하므로, 서버 반환값이 올바른 JSON 포맷인지 확인하는 과정이 필요합니다. (response.json() 사용 권장)
• 체이닝 구조: .catch() 블록이 중간에 위치하면 오류 발생 후에도 다음 .then() 블록이 실행될 수 있으므로 예외 처리는 체인 맨 끝으로 배치하는 것이 안전합니다.