↑ Ajax | ||||
Урок - .serialize() | ||||
← Предыдущий урок Урок - .load()
|
Следующий урок → Урок - .serializeArray()
|
Метод jQuery.serialize() кодирует набор элементов формы в виде строки, для передачи.
Синтаксис метода jQeury.serialize()
.serialize()
Метода jQuery.serialize() не имеет аргументов.
Метод jQuery.serialize() создаетс строку текста в стандартном URL-закодированном обозначении. Метод jQuery.serialize() может действовать на jQuery-объекты, которые выбраны индивидуально из элементов управленяи формы, таких как <input>, <textarea> и <select>:
jQuery('input, textarea, select').serialize();
Однако проще выбрать <form> для сериализации
$( "form" ).on( "submit", function( event ) { event.preventDefault(); console.log( $(this).serialize() ); });
В указанном примере jQuery сериализует "успешные элементы управления"/"successful controls" в случае сабмита формы.
Внимание: выбирая для сериализации форму и её элементы приведет к дублированию информации.
Примечание: Только элементы "успешные элементы управления"/"successful controls" сериализуются в строку. Значение кнопки submit не будет сериализоваться, если форма сабмит происходит не от кнопки. Для включению элемента формы в сериализацию, элемент формы должен иметь атрибут name. Значение флажков (<input type="checkbox">) и радиокнопок (<input type="radio">) включаются только, если они помечены checked. Данные из элемента вабора файла (<input type="file") не сериализуются.
Пример
Сериализация формы в строку запроса, для отправки на сервер AJAX-запросом.
<!DOCTYPE html> <html> <head> <style> body, select { font-size:12px; } form { margin:5px; } p { color:red; margin:5px; font-size:14px; } b { color:blue; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <br /> <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> <br /> <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> <p><tt id="results"></tt></p> <script> function showValues() { var str = $("form").serialize(); $("#results").text( str ); } $("input[type='checkbox'], input[type='radio']").on( "click", showValues ); $("select").on( "change", showValues ); showValues(); </script> </body> </html>
↑ Ajax | ||||
Урок - .serialize() | ||||
← Предыдущий урок Урок - .load()
|
Следующий урок → Урок - .serializeArray()
|