May 17 2009 at 11:29

Prototype: AJAX — просто как 3x3

Invite pending

Не так давно решил узнать что такое Prototype и AJAX и с чем их едят. Как обычно поиски начал с самых простых примеров, но таковых почему-то не оказалось, поэтому на ваш суд представляю самый простенький пример.

Первое что нам понадобится — это простая форма с одним текстовым полем.

<form onsubmit="view_my_name(); return false;">
  <input type="text" name='my_name' id="name_id">
  <input type="submit" value="Отправить">
<form>

Дальше следуют 2 дива, один из которых информирует о выполнение запроса, а во второй будут помещаться данные, полученные от AJAX запроса.

<div id="name_results"></div>
<div id="name" style="display: none">Процесс передачи данных</div>

А вот и сам php-двигатель который будет обрабатывать данные и формы.

<?php
  header('Content-type: application/xml; charset=utf-8');
  header('Cache-Control: no-cache');
  if(@$_POST['my_name'])  print"<p>Ваше имя: ".$_POST['my_name']."</p>";
?>

Как можно было догадаться после нажатия на кнопку «Отправить», данные формы передаются функции view_my_name.

function view_my_name() {
  if ($F("name_id").length <1)
  {
    alert("Ошибка! Вы не ввели имя.");
    return false;
  }
  $('name_results').hide();
  $('name').show();
  new Ajax.Updater('name_results', 'form.php',
    {
      method: 'post',
      parameters: { my_name: $F("name_id") },
      onComplete: function () {
        $('name_results').show();
        $('name').hide();
      }
    }
  );
}

Сначала идет проверка формы.

  if ($F("name_id").length <1)
  {
    alert("Ошибка! Вы не ввели имя.");
    return false;
  }

Затем очищаем поле «name_results» и показываем поле «name»

  $('name_results').hide();
  $('name').show();

Далее следует AJAX запрос на обновление (Updater)

  new Ajax.Updater('name_results', 'form.php',
    {
      method: 'post',
      parameters: { my_name: $F("name_id") },
      onComplete: function () {
        $('name_results').show();
        $('name').hide();
      }
    }
  );

Обновляется div c id=«name_results» результаты запроса. Запрашивать будем form.php — наш двигатель. Данные передаются методом POST. Передаваемый параметр всего 1 — это наше введенное имя «my_name» значение параметра "$F(«name_id»)" после выполнения (onComplete) показываем «name_results» и убираем поле «name» в которое можно вставить какую-нибудь картинку, показывающую что идет процесс передачи данных.

Tags:

Hubs:

Lumber room