jQuery метод .serialize()

Определение и применение

jQuery метод .serialize() кодирует набор элементов формы в виде строки, пригодной для дальнейшего представления в составе строки запроса URL адреса.

Обратите внимание на следующие правила при сериализации:

  • Элементы формы должны содержать атрибут name для возможности сериализации.
  • Значения элементов <input> с типом (атрибут type) "checkbox" и "radio" сериализуются только в том случае, если они будут выбраны.
  • Данные из элементов <input>, предназначенных для выбора файлов не сериализуются (type = "file").
  • Элемент управления не должен быть отключен (атрибут disabled).
  • В раскрывающемся списке (элемент <select>) атрибут name определяет имя элемента управления, а выбранный элемент, или элементы <option> определяют его значение. Элементы <option> сериализуются только в том случае, если они будут выбраны.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
$( selector ).serialize(); // метод не принимает параметров

Обращаю Ваше внимание, что метод .serialize() может быть использован на объект jQuery, который имеет отдельные элементы управления, такие как <input> , <textarea> и <select>:

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

Добавлен в версии jQuery

1.0

Значения параметров

Нет.

Пример использования

Пример использования метода .serialize()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<samp style="color: orangered"></samp>
<form>
  <fieldset>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
      <option>Single3</option>
    </select>

    <br /><br />
    <select name="multiple" multiple="multiple">
      <option>Multiple</option>
      <option>Multiple2</option>
      <option>Multiple3</option>
    </select>

    <br /><br />
    <label>check1<input type="checkbox" name="check" value="check1" /></label>
    <label>check2<input type="checkbox" name="check" value="check2" /></label>
    <br /><br />
    <label>radio1<input type="radio" name="radio" value="radio1" /></label>
    <label>radio2<input type="radio" name="radio" value="radio2" /></label>
  </fieldset>
</form>
main.js
JavaScript
$(document).ready(function () {
    showValues()
    function showValues() {
        var myForm = $('form').serialize()
        $('samp').text(myForm)
    }
    $('input, select').change(showValues)
})

В этом примере мы создали функцию, которая вызывается при загрузке документа, и при изменении элементов формы <input> и <select>. В случае изменения этих элементов формы метод .change() срабатывает и вызывает переданную в качестве параметра функцию.

Функция в свою очередь с использованием jQuery метода .serialize() кодирует набор элементов формы в виде строки, пригодной для дальнейшего представления в составе строки запроса URL адреса и помещает результат выполнения в переменную. После этого значение переменной мы помещаем в элемент <samp> с помощью jQuery метода .text().