FormData
Объект JavaScript для кодирования данных формы
В XMLHttpRequest 2 присутствует новый объект FormData, который позволяет составить набор пар ключ/значение для отправки данных на сервер при помощи XMLHttpRequest.send() метода в формате "multipart/form-data". Т.е. мы теперь можем передать посредством AJAX-запроса не только текстовые данные, но и даже файлы. Очень удобный функционал, больше никаких перезагрузок страницы, после отправки формы, можно всё загружать "на лету" и контролировать процесс передачи информации. Постоянно использую этот надёжный метод.
Рассмотрим пример работы с объектом:
Создадим переменную, в которую передадим все данные из HTML-формы с именем "contact":
var form = document.forms.contact;
Создадим объект FormData, в который автоматически добавятся все поля нашей формы:
var formData = new FormData(form);
Наш объект готов. Теперь можем использовать его различные методы.
FormData.append - Добавляет новое значение существующего поля объекта FormData, либо создаёт его и присваивает значение.
form.append('tower', 'Меркурий'); // Добавляем поле «tower» со значением «Меркурий»
form.append('tower', 'Федерация'); // Добавляем поле «tower» со значением «Федерация»
form.append('floors', 97); // // Добавляем поле «floors» со значением «97»
FormData.delete - Удаляет данные из объекта FormData по ключу.
formData.delete('tower'); // Удаляем ключ-значение «tower»
FormData.get - Возвращает первое значение ассоциированное с переданным ключом из объекта FormData.
formData.get('tower'); // Вернёт «Меркурий»
FormData.getAll - Возвращает массив всех значений ассоциированных с переданным ключом из объекта FormData.
formData.getAll('tower'); // Вернёт [«Меркурий», «Федерация»]
FormData.set - Устанавливает новое значение для существующего ключа объекта FormData, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.
formData.set('floors', '101'); // Задаём новое значение для существующего ключа «floors».
FormData.has - Возвращает булево значение касательно наличия в объекте FormData конкретной пары ключ-значение.
formData.has('floors'); // Вернёт правду. Такой ключ существует.
formData.has('door'); // Вернёт ложь. Такой ключ мы не создавали.
Добавим с Вами новый элемент в функцию, которую уже использовали ранее:
function send_letter( ) { // Создаём функцию с именем 'send_letter'
var form = document.forms.form_letter; // Получаем форму с названием 'form_letter'
var formData = new FormData(form); // Создаём набор пар ключ/значение из данных формы 'form_letter'
formData.append("category", "Вопросы"); // Добавляем поле «category» со значением «Вопросы»
$.ajax({ // Дальше в дело идёт функция jQuery.ajax()
url: "/post_letter/", // Говорим функции, что запрос будем отправлять на URL '/post_letter/'
data: formData, // Данные, которые будут отправлены на сервер
cache: false, // Не кэшировать запрос
processdata: false, // Отключаем опцию processData
contentType: false, // contentType нам не нужен
method: 'POST', // Выбираем метод POST
type: 'POST', // Выбираем тип POST
success: function(data) { // В случае удачного завершения запроса
var response = jQuery.parseJSON(data); // Разбираем полученные данные
if ( response.error == 0 ) { //Если нет ошибок при проверке данных из формы, то сообщаем, что письмо успешно отправлено
alert('Ваше письмо отправлено');
} else { //Иначе - выводим ошибку
alert(response.error);
}
}
});
}
Конструктор FormData() поддерживается всеми современными браузерами. Более подробную информацию можно узнать на сайте Mozilla Developer Network
Просмотров
62 просмотра
Категория
Дата
16 декабря 2017