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);
?>
실제 브라우저에서 다음과 같이 입력값과 파일을 첨부하고 전송버튼을 누르면
다음과 같이 개발자도구에서 입력한 텍스트 및 파일이 표시된 콘솔 로그를 확인할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [javascript] Webrtc 1:1 영상통화 구현하기 (0) | 2023.02.23 |
|---|---|
| [javascript]정규식(regular expression) (0) | 2023.02.19 |
| [Javascript] Local storage를 사용하여 로그인 정보 저장하기. (0) | 2023.02.05 |
| [javascript] 웹 스토리지 (local storage & session storage) (0) | 2023.01.25 |
| [javaScript] filter()사용하여 커스텀 select 메뉴 검색 기능 만들기. (0) | 2023.01.11 |
