FormData는 HTML form 태그에서 사용하는 데이터를 동적으로 제어할 수 있는 기능입니다. 주로 AJAX와 함께 사용됩니다. form 태그에 대해서는 아래 아티클도 다시 참고해 보세요.
3. 입력 양식 작성(1) - 기본 form 태그
웹 상에서, 특정 값을 입력하여 서버나 DB로 값을 보내 처리하는 등의 동작을 위해서는 여러 가지 입력 폼(form)을 사용하게 됩니다. 아마 html에 조금 익숙하신 분들이라면 태그를 가장 먼저 떠올
nozeroslope.tistory.com
사용 방식이 아직은 정확히 와닿지 않을 것입니다. 우선 하나씩 예제를 살펴가면서 이해를 진행해 보겠습니다. 일단, FormData 생성자를 이용해 formData 객체를 생성합니다. 그리고 아래와 같이 메서드를 사용해 데이터를 다루어 보도록 하겠습니다.
const formData = new FormData();
formData.append('name', 'nozeroslope');
formData.append('item', 'orange');
formData.append('item', 'apple');
formData.has('item'); // true
formData.has('money'); // false
formData.get('item'); // orange
formData.getAll('item'); // ['orange', 'apple']
formData.append('test', ['hello', 'world']);
formData.get('test'); // hello, world
formData.delete('test');
formData.get('test'); // null
formData.set('item', 'melon');
formData.getAll('item'); // ['melon']
위 메서드 예제를 하나씩 살펴보겠습니다.
· 우선 메서드 append를 이용해 K-V 형식의 데이터를 저장합니다. item의 사례처럼, 여러 번 사용하면 하나의 키에 복수의 value를 넣을 수도 있습니다.
· has는 boolean으로 해당 키에 해당하는 value가 존재하는지 여부를 리턴합니다.
· get 메서드는 주어진 키에 해당하는 값 한 개를 리턴하고, getAll은 모든 값을 리턴합니다.
· delete 메서드는 현재 키를 제거합니다.
· set은 현재의 키를 수정하는 메서드입니다. item이라는 키의 값에 저장된 배열 값을 없애고 melon만 적용되었습니다.
이제 AJAX 예제에 위 formData 전달 양식을 적용해 보겠습니다. 앞선 아티클에서 사용했던 AJAX 예제를 다시 한번 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
(async () => {
try{
const result = await axios.post('https://www.zerocho.com/api/post/json', {
name: 'zerocho',
birth: 1994,
});
console.log(result);
console.log(result.data);
} catch (error) {
console.error(error);
}
}
)();
</script>
</head>
<body>
</body>
</html>
위의 예제에서 전달된 데이터를 formData로 전환해서 작성해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
(async () => {
try{
const formData = new FormData();
formData.append('name', 'zerocho');
formData.append('birth', 1994);
const result = await axios.post('https://www.zerocho.com/api/post/json', formData);
console.log(result);
console.log(result.data);
} catch (error) {
console.error(error);
}
}
)();
</script>
</head>
<body>
</body>
</html>
'Programming > Node.js' 카테고리의 다른 글
| 3. Front-end Javascript (4) - 데이터 속성과 dataset (0) | 2024.03.12 |
|---|---|
| 3. Front-end Javascript (3) - encode(decode)URIComponent (0) | 2024.03.09 |
| 3. Front-end Javascript (1) - AJAX [2/2] (0) | 2024.03.07 |
| 3. Front-end Javascript (1) - AJAX [1/2] (0) | 2024.03.06 |
| 2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [2/2] (6) | 2024.03.05 |
