jQuery метод .serializeArray()

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

jQuery метод .serializeArray() кодирует набор элементов формы в виде массива объектов, содержащих имена и значения.

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

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

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).serializeArray(); // метод не принимает параметров

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

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

Для наглядности, обратите внимание на результат сериализации методом .serializeArray() абстрактной формы:

[
  { name: "a", value: "1" },  // имя и значение первого элемента формы
  { name: "b", value: "2" }, // имя и значение второго элемента формы
  ...
  { name: "n", value: "3" } // имя и значение n-го элемента формы
]

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

1.0

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

Нет.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода .serializeArray()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  showValues(); // вызываем функцию после загрузки документа
	  function showValues() { 
	    var myForm = $( "form" ).serializeArray(); // переменная, которая содержит результат сериализации формы в виде массива объектов
	    console.log( myForm ); // выводим в консоль значение переменной myForm
	    var out = ""; // создаем пустую строковую переменную
	    for (key in myForm){ //проходим циклом по массиву объектов
	      out += myForm[key].name + ": " + myForm[key].value + "<br>" // добавляем переменной out значения ключей name и value каждого объекта
	    }
	    $( "samp" ).html( out ); // добавляем значение переменной out в элемент <samp>
	  }
	  $( "input, select" ).change( showValues ); // привязываем JavaScript обработчик событий "change"
	});
		</script>
	</head>
	<body>
		<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"> <!-- несколько значений через Ctrl -->
					<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>
	</body>
</html>

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

Функция в свою очередь с использованием jQuery метода .serializeArray() кодирует набор элементов формы в виде массива объектов, выводит в консоль браузера информацию с результатом сериализации нашей формы, добавляет в строковую переменную out значения всех ключей name и value каждого объекта, и выводит содержимое этой переменной в элемент <samp> с помощью jQuery метода .html().

Результат нашего примера:

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

jQuery AJAX