Нам осталось познакомиться еще с несколькими возможностями работы с Ajax, которые предоставляет javascript-библиотека jQuery…

jQuery.ajaxSetup( options ) – позволяет выполнить установку глобальных настроек для выполнения ajax-запросов. Принимает один аргумент в виде набора пар ключ/значение чтобы сконфигурировать настройки ajax-запросов по умолчанию. Все настройки опциональны.

Не буду повторять еще раз описания всех доступных опций, поскольку их можно посмотреть в статье jQuery и Ajax: запросы, а приведу только небольшой поясняющий пример:

$.ajaxSetup({
  url: "/handler.php",
  timeout: 3000,
  type: "POST"
});
$.ajax({ data: myData });

Настройки по умолчанию определяют отправку ajax-запроса к url «/handler.php», устанавливают тайм-аут 3 секунды и определяют использование POST-запроса вместо GET для всех ajax-запросов (если настройки не будут переопределены для конкретного запроса).
Следующий же ajax-запрос содержит только некоторые данные, которые передает, руководствуясь глобальными настройками.

serialize( ) – упорядочивает набор элементов input в строку данных. Начиная с версии jQuery 1.2 корректно работает с формами.
Пример:
Упорядочиваем данные из формы в строку запроса, которая может быть передана на сервер с помощью ajax-запроса.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Не буду приводить HTML и CSS для этого примера, тем более, что его можно скачать. Посмотрим только javascript-код:

<script type="text/javascript">
$(document).ready(function(){
  function showValues() {
    var str = $("form").serialize();
    $("#results").text(str);
  }
  $(":checkbox, :radio").click(showValues);
  $("select").change(showValues);
  showValues();
});
</script>

Функция showValues() – в переменную str пишем строку запроса, которую получаем с помощью serialize() для jQuery-селектора form. Вторая строка там добавлена только для того, чтобы показать эту самую упорядоченную строку запроса в элементе #results, т.е. только для примера.

Более интересны следующие строки:

$(":checkbox, :radio").click(showValues);

Выбираем все элементы input типа checkbox и radio и по клику на любом из них вызываем функцию showValues().

$("select").change(showValues);

То же самое проделываем для элементов select, только с той разницей, что вызовать функцию showValues() будем в случае изменений в элементах select.

showValues();

Просто вызываем функцию showValues() в момент готовности объектной модели документа.

serializeArray( ) – упорядочивает все формы и элементы форм (очень похоже на .serialize() метод), но возвращает данные в виде, который можно использовать для их представления в структуре JSON.

Пример очень похожий. Мы получаем данные из форм, прогоняем через цикл, добавляя их в элемент #result (для наглядности).

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Так же не буду приводить HTML и CSS, а рассмотрим только javascript-код:

<script type="text/javascript">
$(document).ready(function(){
  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>

Последние три строки абсолютно такие же как и в предыдущем примере, изменилась только функция showValues().

var fields = $(":input").serializeArray();

В переменную fields пишем массив, состоящий из значений полей форм. Обратите внимание, jQuery-селектор :input отбирает все элементы input, textarea, select и button, а не только input.

$("#results").empty();

Удаляем все содержимое элемента #results.

jQuery.each(fields, function(i, field){
  $("#results").append(field.value + " ");
});

Для каждого элемента массива fields выполняем одну и ту же операцию – добавляем значение этого поля (с пробелом после него) в элемент #results (это опять же для примера, а могли бы делать и что-то другое).

Буду рад, если эта информация кому-нибудь пригодится…

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru