FormData

В 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