serialize()

посл. ред. 11.02.2017

Метод serialize() из выбранных элементов форм составляет строку запроса, которую можно подставлять в URL. Эта строка уже закодирована с помощью глобального метода encodeURIComponent().

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

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

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

$('form').serialize();

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

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

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

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

jQ_object.serialize() => String: Из выбранных элементов форм составляет строку запроса и возвращает её.

Примеры

<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="serialize()"></li>
    </ul>
  </form>
  <p></p>
</body>
</html>
 
<script>
$('form').on('submit', function (event) {
  event.preventDefault();
  $('p').html('Строка запроса: <b>' + $(this).serialize() + '</b>');
});
</script>