JavaScript

Formdata와 fetch를 활용하여 서버로 데이터 전송하기

teamnova 2023. 2. 15. 12:00
728x90

안녕하세요 이번 시간에는 Formdata와 fetch를 활용하여 서버로 데이터를 전송하는 방법에 대해 알아보려 합니다. 

일반적으로 서버에 데이터를 전송하기 위해 form 태그를 사용하여 전송합니다.

 

하지만 자바스크립트로도 FormData()라는 클래스를 통해 데이터를 전송할 수 있습니다.

FormData를 활용하면 자바스크립트 로직 상에서 데이터를 서버에 전송해야 할 때 자바스크립트단에 html5 태그를 넣지 않고도 전송이 가능하며, 페이지 전환 없이 비동기로 데이터를 전송하고 값을 되돌려 받고 싶을 때도 유용하게 사용 가능합니다.

 

기본적인 사용법은 다음과 같습니다.

아래의 예제는 두 종류의 텍스트와 파일을 서버에 전송한 뒤 제대로 서버로 전달이 되었는지 확인하기 위한 코드입니다.

 

우선 다음과 같은 형태로 index.html에서 getData.php로 데이터를 전송합니다.

 

index.html

<body>
    <input type="text" name="input1" value = "입력값1" id = "textInput1">
    <input type="text" name="input2" value = "입력값2" id = "textInput2">
    <input type="file" id="fileInput">
    <button type="submit" id="sendButton">전송</button>
 
    <script>
        const textInput1 = document.querySelector('#textInput1');
        const textInput2 = document.querySelector('#textInput2');
        const fileInput = document.querySelector("#fileInput");
        const sendButton = document.querySelector("#sendButton");
 
        sendButton.addEventListener("click",async function(){
 
            // form Data 객체 생성
            const formData = new FormData();
            

            formData.append("input1", textInput1.value);
            formData.append('input2', textInput2.value);
            // 여러개의 파일을 선택한 경우가 아니라면 files[0] 
            formData.append('fileInput', fileInput.files[0]);           
            
            // fetch를 사용해 서버로 데이터 전송
            const res = await fetch('./getData.php', {

                method: 'POST',                
                body: formData
                });
            
            const response = await res.json(); 

			// 서버에 제대로 전달했는지 로그 찍어서 확인
            console.log(response);            
            
        });
    </script>
</body>

 

서버에서는 받은 데이터를 DB에 저장하거나 하는 형태로 활용할 수 있습니다.

예제에서는 제대로 전달되었는지 확인하기 위해 서버에서는 받은 데이터를 json 형태로 출력해줍니다

 

getData.php

<?php 

// 클라이언트로부터 전달받은 데이터를 json에 담아서 출력
$send["input1"]   =  $_POST['input1'];
$send["input2"]   =  $_POST['input2'];
$send["file"] =  $_FILES['fileInput'];
echo json_encode($send);
?>

 

실제 브라우저에서 다음과 같이 입력값과 파일을 첨부하고 전송버튼을 누르면

 

다음과 같이 개발자도구에서 입력한 텍스트 및 파일이 표시된 콘솔 로그를 확인할 수 있습니다.