Работа с формой через метод ajax

Рассмотрим различные способы простого извлечения данных из HTML формы, познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого.

Получения данных формы с помощью метода each

Работу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.

// Создадим пустой объект
var $data = {};
// Переберём все элементы input, textarea и select формы с id="myForm "
$('#myForm').find ('input, textearea, select').each(function() {
  // добавим новое свойство к объекту $data, где имя свойства это значение атрибута name элемента, значение свойства это значение свойство value элемента
  $data[this.name] = $(this).val();
});

В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов (name и value) элементов.

При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.

Для отправки данных на сервер, можно использовать метод jQuery ajax, в котором:

url адрес PHP скрипта
type вид запроса
data данные запроса
success функция, которая будет вызвана после получения ответа от сервера, сам ответ доступен посредством аргумента result

$.ajax({
  url: 'process.php',
  type: 'post',
  data: $data,
  success: function(result) {
    // Действия при получения ответа (result) от сервера
  }
});

Сериализация формы

В jQuery для получения всех полей формы input, textarea и select можно использовать следующие методы:

serialize() предназначен для сериализации данных формы в строку запроса
serializeArray() выполняет кодирование элементов формы в массив, состоящий из имен и значений

Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.

Рассмотрим как можно перебрать массив, который вернул метод serializeArray с помощью функции each:

// создание массива объектов из данных формы
var data = $('#myForm').serializeArray();
// переберём каждое значение массива и выведем его в формате имяЭлемента=значение в консоль
$.each(data,function(){
  console.log(this.name+'='+this.value);
});

Если собираете данные для того чтобы их передать в метод библиотеки jQuery ajax, в этом случае неважно какой из этих методов использовать. Метод может принимать данные, закодированные как с помощью метода serialize, так и посредством serializeArray.

Для того чтобы элемент был сериализован методом serialize или serializeArray, он должен отвечать критериям successful controls, указанным в спецификации HTML:

Наличие у элемента атрибута name
Если форма отправлена не с помощью кнопки submit, значит кнопка не будет добавлена в возвращаемую методом строку или массив
Значения из элементов checkboxes и radio, а также input с type radio или checkbox будут включены в набор только в том случае, если они отмечены
Элементы, которые отключены, обработаны не будут. Для того чтобы элемент был сериализован, он должен иметь false в качестве значение свойства disabled, у элемента обязан отсутствовать атрибут disabled

Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.

Работа с формой

Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода serialize или serializeArray. Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery ajax. Ответ, который прийдёт с сервера вставим в элемент с идентиикатором form_result:

<!-- Элемент для вывода результата -->
<div id="form_result"></div>
<hr>
<!-- HTML-форма -->
<form id="orderCallBack" action="process.php">
  Ваше имя: <input type="text" name="name" value=""><br>
  Ваш телефон: <input type="text" name="phone" value=""><br>
  Ваше сообщение:<br> <textarea name="message"></textarea><br>
  <input type="submit" name="submit1" value="Заказать звонок" data-method="serialize"><br>
  <input type="submit" name="submit2" value="Заказать звонок" data-method="serializeArray">
</form>
<!-- Сценарий для обработки формы -->
<script>
$(function() {
  // при нажатию на кнопку с типом submit
  $('#orderCallBack input[type="submit"]').click(function(e) {
    // отменяем стандартное поведение браузера
    e.preventDefault();
    // переменная, которая будет содержать данные серилизации
    var $data;
    // в зависимости от того какую нажали кнопку, выполняем серилизацию тем или иным способом
    if ($(this).attr('data-method') == 'serialize') {
      $data = $(this).parent('form').serialize();
    } else {
      $data = $(this).parent('form').serializeArray();
    }
    // для отправки данных будем использовать технологию ajax
    //   url - адрес скрипта, с помощью которого будем обрабатывать форму на сервере
    //   type - метод отправки запроса (POST)
    //   data - данные, которые необходимо передать серверу
    //   success - функция, которая будет вызвана, когда ответ прийдёт с сервера
    $.ajax({
      url: $(this).parent('form').attr('action'),
      type: 'post',
      data: $data,
      success: function(result) {
        $('#form_result').html(result);
      }
    })
  });
});
</script>

PHP код, обрабатывающий ajax запрос на сервере, который просто формирует строку из данных формы:

<?php
// переменная для сохранения результата
$data='';
// переберём массив $_POST
foreach ($_POST as $key => $value) {
  // добавим в переменную $data имя и значение ключа
  $data .= $key . ' = ' . $value . '';
}
// выведим результат
echo $data;