FormData, 새로운 formdata 이벤트 및 HTML 양식
15849 단어 htmlwebdevjavascript
FormData란 무엇입니까?
더 자세히 알아보기 전에 FormData가 무엇인지 명확히 합시다. 웹 개발을 처음 접하는 사람들을 위해 HTML 양식은 emit events . 이것은 거의 모든 HTML 요소의 기능입니다.
다음 형식을 고려하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML forms and JavaScript</title>
</head>
<body>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="description">Short description</label>
<input type="text" id="description" name="description" required>
<label for="task">Task</label>
<textarea id="task" name="task" required></textarea>
<button type="submit">Submit</button>
</form>
</body>
<script src="form.js"></script>
</html>
따라하려면 HTML 파일을 만들 수 있습니다. 내 예제를 복사하십시오. 양식이 제출되면, 즉 사용자가 필드를 채우고 "제출"버튼을 클릭하면 제출이라는 이벤트가 전달됩니다.
즉, 이벤트 리스너로 제출 이벤트를 들을 수 있습니다.
// form.js
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
});
preventDefault()를 호출하면 페이지 새로 고침이 방지되므로 백엔드에서 양식 필드를 보내고 싶지 않을 때 편리합니다.
이제 양식에서 실제 데이터를 가져오는 몇 가지 방법이 있습니다. 이 경우 모든 양식 요소를 생성하는 event.target.elements를 검사할 수 있습니다.
또는 DOM 인터페이스인 FormData를 생성자로 사용할 수도 있습니다. 인수로 형식이 필요합니다.
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
const data = new FormData(form);
});
지금부터 FormData 개체에서 모든 종류의 작업을 수행할 수 있습니다. 이에 대해서는 나중에 자세히 설명합니다. 이제 formdata 이벤트를 살펴보겠습니다.
formdata 이벤트 알아보기
formdata 이벤트는 웹 플랫폼에 새롭게 추가된 멋진 이벤트입니다. FormData의 향상으로 이벤트는 new FormData()를 호출할 때마다 시작됩니다. 이제 다음 예를 고려하십시오.
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
new FormData(form);
});
form.addEventListener("formdata", event => {
// event.formData grabs the object
console.log(event.formData);
});
첫 번째 이벤트 리스너에서는 양식에서 새 FormData를 빌드합니다. 이번에는 결과를 변수에 저장할 필요가 없습니다.
이 호출에 대한 응답으로 새 개체는 다른 수신기를 등록하는 formdata 이벤트를 시작합니다.
이 두 번째 리스너에서는 event.formData에서 실제 데이터를 가져올 수 있습니다.
이 패턴은 실제 양식 데이터(API 호출 등 만들기)를 처리해야 하는 다른 콜백에서 첫 번째 이벤트 리스너를 분리하는 데 도움이 됩니다.
다음 섹션에서는 FormData 개체에서 데이터를 가져오는 방법을 살펴보겠습니다.
FormData 객체에서 데이터 가져오기
FormData 객체에 스니치하려면 브라우저에서 예제 HTML 양식을 방문하고 console.log(event.formData)에 중단점을 배치하십시오.
브라우저의 콘솔이 열린 상태에서 양식을 채우고 제출하고 개체를 전역 변수로 저장합니다.
Chrome에서 개체(temp1)에 액세스할 수 있어야 합니다.
console.log(temp1)
// FormData {append: ƒ, delete: ƒ, get: ƒ, getAll: ƒ, has: ƒ, …}
보시다시피 많은 방법이 있습니다. 값 배열을 추출하려면 다음을 실행하십시오.
const values = [...temp1.values()]
// sample output
// ["Liz", "Trip to London", "Trip to London"]
항목 배열을 추출하려면 다음을 실행하십시오.
const entries = [...temp1.entries()]
이 예제에서는 FormData 개체에서 다양한 모양의 모든 데이터를 가져올 수 있습니다.
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
new FormData(form);
});
form.addEventListener("formdata", event => {
const data = event.formData;
// get the data
const entries = [...data.entries()];
console.log(entries);
const values = [...data.values()];
console.log(values);
});
경고: FormData는 필드와 값 사이의 매핑을 구축하기 위해 양식 필드 이름 속성에 의존합니다. 즉, 다음 요소는 아무 것도 생성하지 않습니다.
<!-- bad -->
<input type="text" id="name" required>
<input type="text" id="description" required>
항상 필드 이름을 제공하십시오.
<!-- good -->
<input type="text" id="name" name="name" required>
<input type="text" id="description" name="description" required>
FormData 객체에 데이터 추가
제출 단계에서 추가 데이터를 저장하기 위해 HTML 양식에 숨겨진 입력을 갖는 것이 일반적입니다.
<!-- no more hidden fields -->
<input type="hidden" id="someInfo" name="someSecretInfo" value="someSecreteInfo">
숨겨진 입력은 렌더링된 HTML에 표시되지 않지만 개발자 콘솔에서 계속 액세스할 수 있습니다.
FormData 개체에서 양식 필드를 읽는 것 외에도 추가를 사용하여 새 키/값 쌍을 추가할 수도 있습니다.
// omitted for brevity
form.addEventListener("formdata", event => {
const data = event.formData;
// append more fields
data.append("anHiddenKeyA", "anHiddenValueA");
data.append("anHiddenKeyB", "anHiddenValueB");
// get the data
const entries = [...data.entries()];
console.log(entries);
const values = [...data.values()];
console.log(values);
});
이는 HTML 양식에서 숨겨진 입력 필드를 피하는 데 편리합니다.
플랫폼에 새로 추가된 formdata 이벤트는 이전 브라우저에서 사용할 수 없으므로 주의하여 사용하십시오.
읽어주셔서 감사합니다. 계속 지켜봐주세요!
자원
FormData objects on MDN
Reference
이 문제에 관하여(FormData, 새로운 formdata 이벤트 및 HTML 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/valentinogagliardi/formdata-the-new-formdata-event-and-html-forms-ble텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
