(JS) FormData 설명 정리

에프ormdata

FormData는 웹 브라우저에서 제공하는 JavaScript API입니다.
HTML 형식으로 입력된 사용자의 데이터를 쉽게 처리하고 전송할 수 있도록 도와줍니다.
이 API를 사용하면 JavaScript를 사용하여 새로운 양식 데이터를 만들 수 있습니다.
기존 양식 데이터를 가져오고 편집할 수 있습니다.

이 양식 데이터는 HTTP 요청을 통해 서버로 전송될 때 사용됩니다.
FormData 객체는 append() 메서드를 사용하여 양식 데이터의 모든 항목을 추가할 수 있습니다.
이 방법은 양식 데이터에 키-값 쌍으로 구성된 데이터를 추가하는 데 사용할 수 있습니다.
이때 key는 form element의 name 속성 값이 되고 value는 form element에 입력된 값이 됩니다.

FormData 객체는 XMLHttp요청 객체와 함께 사용할 때 가장 유용함
. FormData 객체를 XMLHttpRequest 객체의 send() 메서드에 전달하여 양식 데이터를 서버로 보낼 수 있습니다. 이를 통해 다음과 같은 다양한 웹 애플리케이션 개발이 가능합니다. B. AJAX 기술을 사용한 웹 페이지의 동적 업데이트.

FormData 추가 설명

출처: https://inpa.entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api

서버에 데이터를 제출하려면 일반적으로 HTML5 양식 태그를 사용하여 메뉴를 만들고 제출하는 방법을 기억할 수 있습니다.

<form action="./login" method="post">
    <strong>아이디</strong>
    <input type="text" name="name" value="아이디 입력">
    
    <strong>비밀번호</strong>
    <input type="password" name="password" value="비밀번호 입력">
    
    <strong>성별</strong>
    <input type="radio" name="gender" value="M">남자
    <input type="radio" name="gender" value="F">여자
    
    <strong>응시분야</strong>
    <input type="checkbox" name="part" value="eng">영어
    <input type="checkbox" name="part" value="math">수학

    <input type="submit" value="제출">
</form>

음, 일반적으로 HTML5 입력 값은 태그와 함께 서버로 전송되며,

자바스크립트에서 폼데이터() 클래스를 사용하여 동일한 방식으로 스크립트로 보낼 수도 있습니다.

즉, FormData는 HTML 레이어가 아닌 JavaScript 레이어에서 폼 데이터를 처리하는 객체입니다.

및 HTML 형식 제출 제출 작업은 Ajax를 통해 서버로 전송됩니다.

let formData = new FormData(); // new FromData()로 새로운 객체 생성
formData.append('item','hi'); // <input name="item" value="hi"> 와 같다.
formData.append('item','hello'); // <input name="item" value="hello">

FormData 언제 사용됩니까?

대부분의 독자는 HTML로 양식 데이터를 처리할 수 있는데 JavaScript로 양식 데이터를 처리해야 하는 이유를 이해하지 못할 것입니다.

사실 자바스크립트에서 Ajax로 폼(폼 태그)을 제출할 필요가 거의 없다.

그러나 HTML이 아닌 JavaScript에서는 양식 제출 과정이 필요한 경우가 있으며 이미지 등의 멀티미디어 파일 JavaScript를 사용하여 페이징 이상 없이 양식 데이터를 비동기식으로 제출하려는 경우 면밀히양식 데이터를 쉽게 관리하려면 formData 객체를 사용할 수 있습니다.

// 자바스크립트로 직접 form 태그를 생성
let formData = new FormData(); // 새로운 폼 객체 생성
formData.append('name','hyemin'); // 폼 데이터를 스크립트로 추가
formData.append('item','hi'); // <input name="item" value="hi"> 와 같다.
formData.append('item','hello'); // <input name="item" value="hello">

// 만일 HTML에 미리 form 태그가 있으면 제이쿼리나 자바스크립트로 가져올 수도 있다.
let formData1 = new FormData($("#form Id")); // 제이쿼리인 경우
let formData2 = new FormData(document.getElementById("form Id")); // 자바스크립트로 가져 올 경우

위와 같이 양식 객체에 추가() 방법을 사용하여 키 값과 값 값을 하나씩 추가하면,

이는 입력 태그에 값을 입력하는 것과 같은 효과가 있습니다.

값은 무조건적입니다. “선”객체 또는 배열과 같은 복합 데이터로 자동 변환된 데이터는 붙여넣을 수 없습니다.

formData 힌트
formData.append(이름, 값)
함수를 통해 데이터를 입력할 때 값은 문자열로만 입력됩니다.
문자열 이외의 데이터 유형을 입력하면 무시되고 자동으로 문자열로 변환됩니다.