serializeArray()

65
посл. ред. 12.02.2017

Метод serializeArray() из выбранных элементов форм составляет массив объектов вида {name: 'имя', value: 'значение'}. Формат массива подходит для перекодирования в JSON-строку. Пример результирующего массива:

[
  {
    name: 'field_1',
    value: '1'
  },
  {
    name: 'field_2',
    value: '2'
  },
  {
    name: 'field_3',
    value: '3'
  }
]

Данный метод можно использовать на jQuery-объектах, которые содержат элементы форм (<input>, <textarea> или <select>). Пример:

$('input, textarea, select').serializeArray();

Обычно, достаточно выбрать саму форму для сериализации:

$('form').serializeArray();

В этом случае jQuery составит массив из готовых для отправки элементов формы. Если выборка будет содержать и саму форму, и её дочерние элементы, тогда в результирующем массиве элементы будут продублированы.

Только готовые к отправке элементы форм подлежат сериализации.

  • Пока кнопка "submit" не нажата, она не подлежит сериализации.
  • Для сериализации элементы обязаны иметь атрибут name.
  • Кнопки "checkbox" и "radio" сериализуются, только если они выбраны в данный момент (checked).
  • Элементы типа "file" не сериализуются.

Варианты использования

jQ_object.serializeArray() => Array
Возвращает массив объектов вида {name: 'имя', value: 'значение'} из готовых для отправки элементов форм.

Примеры

<html>
<head>
  <title>Ajax в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <form>
    <ul>
      <li><input type="text" name="text_field" value="Имя"></li>
      <li><input type="checkbox" name="checkbox_field" value="true" checked></li>
      <li>
        <input type="radio" name="radio_field" value="1">
        <input type="radio" name="radio_field" value="2" checked>
      </li>
      <li>
        <select name="select_field">
          <option value="1">Первый</option>
          <option value="2">Второй</option>
        </select>
      </li>
      <li><textarea name="textarea_field">Сообщение...</textarea></li>
      <li><input type="submit" value="serializeArray()"></li>
    </ul>
  </form>
  <p></p>
</body>
</html>
 
<script>
$('form').on('submit', function (event) {
  event.preventDefault();

  var result = '';
  var fields = $(this).serializeArray();

  jQuery.each(fields, function(i, field) {
    result += field.name + ' = ' + field.value + '<br>';
  });

  $('p').html(result);
});
</script>