PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

Получение всех значений формы

Библиотека jQuery позволяет получить все данные формы за один раз и подготовить их для передачи на сервер. Для этого предназначены следующие методы.

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

$(,,#btnl") .click (function ()   {
alert($("#txtl").serialize());
});
<input type="text” name=”txtl” id="txtl" value=”Текст"><br> 
<input type="button" id="btnl" value="Получить значение">
Результат:
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82

serializeArray () — возвращает массив всех данных формы. Первым элемен-том является порядковый номер элемента внутри формы. Нумерация начинает-ся с 0. Второй элемент представляет собой объект с двумя свойствами:
name — название поля в форме;
value — значение поля.

Метод позволяет обработать данные не только всей формы, но и отдельных элементов.

$("#btnl").click(function()   {
var arr = $("#txtl").serializeArray(); 
$("#divl")
.html("Поле:   "+arr [0] . name+" <br>Значение :   "+arr [0] . 
value) ;
});
<input type="text" name="txtl" id="txtl" value="TeKCT"><br>
<input type="button" id="btnl" value="Получить значение"><br> 
<div id="divl"></div>

Результат:
Поле: txtl
Значение: Текст

$.param(Объект) — позволяет преобразовать объект в строку, предназна-ченную к отправке на сервер. Применяется как обычная функция, объявленная в пространстве имен библиотеки jQuery. Не требует предварительного нахожде-ния коллекции элементов.

$("#btnl").click(function()   {
$("#divl").text($.param($("#txtl").serializeArray()));
});
<input type="text" name="txtl" id="txtl" value="Текст"><br> 
<input type="button" id="btnl" value="Получить значение"><br> 
<div id="divl” ></div>
Результат:
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82
В качестве параметра можно передать коллекцию элементов. В качестве примера получим значения всех текстовых полей.
$("#btnl").click(function()   {
$("#divl").text($.param($(":text") ) ) ;
});
<input type="text" name="txtl" id="txtl" value="1"><br> <input type="text" name="txt2" id="txt2" value="2"><br> <input type="button" id="btnl" value="Получить значения"><br> <div id="divl"></div>
Результат:
txtl=l&txt2=2

Функция позволяет обработать не только данные формы, но и обычные объекты.
var obj = {var1:"Текст", var2:5};
alert($.param(obj));
Результат:
varl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&var2=5

Пример обработки данных всей формы разными методами приведен в листинге 8.8.
Листинг 8.8. Методы serialize(), serializeArray() и $.param()

<html>
<head>
<title>Методы serialize(), serializeArray() и
$.param()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").text($("#frm1").serialize());
      var arr = $("#frm1").serializeArray();
      var txt = "";
      for (var i=0, count=arr.length; i<count; i++) {
         txt += i + " => " + arr[i].name + " = ";
         txt += arr[i].value + "<br>";
      }
      $("#div2").html(txt);
      $("#div3").text($.param(arr));
   });
});
//-->
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="text" name="txt1" id="txt1" value="Текст"><br>
<input type="hidden" name="hdn1" id="hdn1" value="1">
<input type="checkbox" name="check1" id="check1" value="yes">
Текст<br>
Укажите ваш пол:<br>
<input type="radio" name="radio1" id="radio1" value="male"
checked>Мужской
<input type="radio" name="radio1" id="radio1"
value="female">Женский
<br>
<input type="checkbox" name="c[]" id="c[]" value="1"> Пункт
1<br>
<input type="checkbox" name="c[]" id="c[]" value="2"> Пункт
2<br>
<input type="checkbox" name="c[]" id="c[]" value="3"> Пункт
3<br>
</form>
<input type="button" id="btn1" value="Получить
значения"><br><br>
<b>serialize():</b><br>
<div id="div1"></div>
<b>serializeArray():</b><br>
<div id="div2"></div>
<b>$.param():</b><br>
<div id="div3"></div>
</body>
</html>

Результат при значениях по умолчанию: serialize():
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&hdnl=l&radiol=male serializeArray():
0 => txtl = Текст
1 => hdnl = 1
2 => radiol = male $.param():
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&hdnl=l&radiol=male

 
Предыдущая   На главную   Следующая          

Svist   09.02.2013 в 13:54
Хороший понятный пример! Спасибо !

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru