🍀 FormData API FormData API — это интерфейс JavaScript, который упрощает работу с данными форм, позволяя отправлять их на сервер, включая поддержку файлов. 🚀 Основные методы: 1. Создание объекта: const formData = new FormData(formElement); // или new FormData() 2. Методы: - append(name, value): Добавляет новое значение. - set(name, value): Устанавливает значение, перезаписывая существующее. - delete(name): Удаляет указанное значение. - get(name): Получает первое значение для ключа. - getAll(name): Возвращает все значения как массив. - has(name): Проверяет наличие ключа. - forEach(callback): Применяет функцию к каждому полю. - entries() Возвращает итератор по всем парам [ключ, значение]. - keys(): Возвращает итератор по всем ключам. - values(): Возвращает итератор по всем значениям. Пример использования : <form id="myForm"> <input type="text" name="username" placeholder="Username" required> <input type="email" name="email" placeholder="Email" required> <input type="file" name="profilePicture"> <button type="submit">Submit</button> </form> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // Предотвращаем стандартное поведение формы и не перезагружаем страницу const formData = new FormData(this); // Используем метод set formData.set('username', 'newUsername'); // Перезаписываем username // Добавляем ещё одну пару ключ-значение formData.append('extraField', 'extraValue'); // Проверяем наличие ключа if (formData.has('email')) { console.log('Email field exists.'); } // Получаем все значения по ключу const emailValue = formData.get('email'); console.log('Email:', emailValue); // Удаляем profilePicture formData.delete('profilePicture'); // Используем forEach для итерации по всем полям formData.forEach((value, key) => { console.log(key, value); }); // Отправляем данные на сервер fetch('/submit', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); }); #JavaScript #WebDevelopment #Frontend 🐱 FrontEnd_Xpert