↑ Ajax | ||||
Урок - .serializeArray() | ||||
← Предыдущий урок Урок - .serialize()
|
Следующий урок → Урок - События и обработчики событий в jQuery.
|
Метод jQuery.serializeArray() кодирует элементы форсы в виде массива ключ-значение.
Синтаксис метода jQuery.serializeArray()
.serializeArray()
У метода jQuery.serializeArray() нет аргументов.
Описание метода jQuery.serializeArray()
Метод jQuery.serializeArray() создает JavaScript массив объектов, готовых для использования при кодировании в JSON-строку. В этой операции в jQuery объект представляется как набор элементов формы. Элементы могут быть нескольких типов:
<form> <div><input type="text" name="a" value="1" id="a" /></div> <div><input type="text" name="b" value="2" id="b" /></div> <div><input type="hidden" name="c" value="3" id="c" /></div> <div> <textarea name="d" rows="8" cols="40">4</textarea> </div> <div> <select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select> </div> <div> <input type="checkbox" name="f" value="8" id="f" /> </div> <div> <input type="submit" name="g" value="Submit" id="g" /> </div> </form>
Метод jQuery.serializeArray() использует стандартные правила W3C для "успешных элементов управления"/"successful controls", чтобы определить, какие элементы она необходимо включать в набор элементов для сериализации. Например элемент должен иметь атрибут name и быть активным (enabled). Если сабмит (submit) формы происходит не от кнопки сабмита (<input type="submit> или <button type="submit"></button>) данные о кнопке не включаются в массив для сериализации. Также не включаются данные из элемента выбора файла (<input type="file").
Метод jQuery.serializeArray() может работать отдельно с элементами формы, такие как <input>, <select>, <textarea>. Однако, как правило проще работать с элементом формы <form>.
$('form').submit(function() { console.log($(this).serializeArray()); return false; });
Это приведет к следующей структуре данных (при условии, что браузер поддерживает console.log):
[ { name: "a", value: "1" }, { name: "b", value: "2" }, { name: "c", value: "3" }, { name: "d", value: "4" }, { name: "e", value: "5" } ]
Пример
Получаем значение элементов формы и выодим результат.
<!DOCTYPE html> <html> <head> <style> body, select { font-size:14px; } form { margin:5px; } p { color:red; margin:5px; } b { color:blue; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <p><b>Results:</b> <span id="results"></span></p> <form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="check" value="check1" id="ch1"/> <label for="ch1">check1</label> <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/> <label for="ch2">check2</label> <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/> <label for="r1">radio1</label> <input type="radio" name="radio" value="radio2" id="r2"/> <label for="r2">radio2</label> </form> <script> function showValues() { var fields = $(":input").serializeArray(); $("#results").empty(); jQuery.each(fields, function(i, field){ $("#results").append(field.value + " "); }); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues(); </script> </body> </html>
↑ Ajax | ||||
Урок - .serializeArray() | ||||
← Предыдущий урок Урок - .serialize()
|
Следующий урок → Урок - События и обработчики событий в jQuery.
|