На этом шаге мы рассмотрим понятие сериализации и метод .serialize().

    Передача данных на сервер часто связана с заполнением форм пользователем. Вместо того чтобы полагаться на обычный механизм отправки формы, который выполняет загрузку ответа сервера в окно браузера как отдельную страницу, мы можем использовать средства поддержки технологии AJAX, входящие в библиотеку jQuery, чтобы отправлять данные формы асинхронно и помещать возвращаемые данные внутрь текущей страницы.

    Чтобы продемонстрировать такую возможность, создадим простую форму:

        <div class="letter" id="letter-f">
          <h3>F</h3>
          <form>
            <input type="text" name="term" value="" id="term" />
            <input type="submit" name="search" value="search" id="search" />
          </form>
        </div>

    На этот раз сценарий PHP будет возвращать несколько словарных статей, содержащих искомый термин, как подстроку в заголовке словарной статьи. Данные будут иметь ту же структуру, что и прежде, но логика их выборки будет немного иной:

foreach ($entries as $term => $entry) {
  if (strpos($term, strtoupper($_REQUEST['term']))
      !== FALSE) {
    $html = '<div class="entry">';

    $html .= '<h3 class="term">';
    $html .= $term;
    $html .= '</h3>';

    $html .= '<div class="part">';
    $html .= $entry['part'];
    $html .= '</div>';

    $html .= '<div class="definition">';
    $html .= $entry['definition'];
    if (isset($entry['quote'])) {
      foreach ($entry['quote'] as $line) {
        $html .= '<div class="quote-line">'. $line .'</div>';
      }
      if (isset($entry['author'])) {
        $html .= '<div class="quote-author">'.
          $entry['author'] .'</div>';
      }      
    }
    $html .= '</div>';
  
    $html .= '</div>';
  
    print($html);
  }
}

    Функция strpos() проверяет наличие в слове искомой подстроки. Теперь мы можем реализовать реакцию на событие отправки формы и подготовить параметры запроса, получив данные из дерева DOM:

 $(document).ready(function() {
   $('#letter-f form').submit(function() {
     $('#dictionary').load('f.php',
       {'term': $('input[name="term"]').val()});
     return false;
   });
 });

    Эта реализация дает желаемый эффект, но поиск полей ввода по имени и добавление их значений в отображение выглядит довольно громоздко. В частности, такая реализация плохо масштабируется по мере усложнения формы. К счастью, библиотека jQuery предлагает упрощенную реализацию этой часто встречающейся идиомы. Метод .serialize() воздействует на объект jQuery и преобразует соответствующие элементы DOM в строку запроса, которая может передаваться в составе запроса AJAX. Мы можем сделать наш обработчик события отправки формы более универсальным, как показано ниже:

$(document).ready(function() {
  $('#letter-f form').submit(function() {
    $.get('f.php', $(this).serialize(), function(data) {
      $('#dictionary').html(data);
    });
    return false;
  });
});

Рис.1. Вид страницы после выполнения операции поиска

Рис.2. Вид страницы с операцией выполнения поиска

    Теперь тот же самый сценарий сможет отправлять данные формы даже при увеличении количества полей в форме. После выполнения поиска на странице отображаются найденные словарные статьи, как показано на рисунке 1.

    На следующем шаге мы рассмотрим слежение за ходом выполнения запроса.

Предыдущий шаг Содержание Следующий шаг