Nickolay.info. PHP. Связанные списки на PHP и AJAX с минимумом кода

Nickolay.info. PHP. Статьи. Связанные списки на PHP и AJAX с минимумом кода

Представим типовую при разработке web-приложений ситуацию - Вы выбираете что-то из главного списка и по этому выбору должен обновляться подчинённый список, скажем, вот так.

Если содержимое подчинённых списков уже находится на стороне клиента, например, хранится в Javascript-массивах, то нам нечего и делать, не стоило бы писать заметку. Другое дело, если оно - динамическое, скажем, по выбору из главного списка элементы подчинённого списка загружаются из базы данных или находящегося на сервере файла. Тогда не обойтись без технологии AJAX, суть которой - возможность обращаться к серверным скриптам на PHP из клиентских скриптов, выполняемых в Вашем браузере с помощью JavaScript.

В качестве "рабочей лошадки", которая будет отвечать за AJAX, совсем необязательно брать громоздкий JQuery, хватит и 5-килобайтового Simple AJAX Code-Kit (SACK), который можно скачать здесь (в архиве будет приложен).

Код HTML-формы нашего примера вот такой:

<form action="" method="post">
<p>Страна: 
 <select id="mainList_id" name="mainList_id" onchange="getSubList(this)" style="width:150px">
  <option value="">Выберите страну</option>
  <option value="ru">Россия</option>
  <option value="ua">Украина</option>
  <option value="by">Белоруссия</option>
 </select>
Город: 
 <select id="subList_id" name="subList_id" style="width:150px">
 </select>
</form>

Разумеется, у реальной формы может быть кнопка "Отправить", по которой данные передадутся "дальше" на обработку. И список стран мог быть не статическим, а тоже получен из базы или прочитан из файла.

Обработчик события выбора из списка onchange, который вызовет через AJAX серверный скрипт с именем getdata.php и выполнит ответ, полученный от сервера, займёт всего несколько строк кода:

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();

function getSubList(sel) {
 var listCode = sel.options[sel.selectedIndex].value;
 document.getElementById('subList_id').options.length = 0; //Очистить подчинённый список
 if (listCode.length>0) { //Если выбран не первый элемент
  var index = ajax.length;
  ajax[index] = new sack();
  ajax[index].requestFile = 'getdata.php?listCode='+listCode; //PHP получит данные для выбранного элемента главного списка
  ajax[index].onCompletion = function(){ createSubList(index) }; //И выполнит указанную Javascript-функцию по завершении 
  ajax[index].runAJAX(); //Выполнить AJAX
 }
}

function createSubList(index) {
 var obj = document.getElementById('subList_id');
 eval(ajax[index].response); //Выполнить ответ от AJAX как Javascript-код
}
</script>

Этот код может располагаться, например, в теге <HEAD> документа.

Осталось написать серверный скрипт, в нашем примере он получает данные из массива $data, элементы которого с индексами-кодами стран хранят нужные списки городов. На самом деле легко получить нужные данные из базы или файла.

<?php
$data = array (
 'ru' => array ('Москва', 'Санкт-Петербург', 'Новосибирск', 'Нижний Новгород', 'Другой Город'),
 'ua' => array ('Киев', 'Днепропетровск', 'Одесса', 'Урюпинск'),
 'by' => array ('Минск','Пинск','Двинск')
);
if (isset($_GET['listCode'])) {
 $key=$_GET['listCode'];
 if (array_key_exists($key,$data)) {
  $list = $data[$key];
  $n = count ($list);
  for ($i=0; $i<$n; $i++) echo "obj.options[obj.options.length] = new Option('".$list[$i]."','".($i+1)."');\n";
 }
}
?>

Обратите внимание, что скрипт, в конечном итоге, просто создаёт новые элементы списка, генерируя нужный для этого Javascript-код. Значениями value новых элементов будут числа 1, 2, 3 ... - так как при создании элементу даётся номер $i+1, это можно поменять.

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

Чтобы наша маленькая AJAX-библиотека успешно справлялась с кириллицей, файл getdata.php должен быть закодирован в Юникоде (UTF-8), у меня так и сделано. Это не мешает файлу с формой оставаться в русской кодировке Windows, максимум, чем мы рискуем - предупреждение в консоли некоторых браузеров (вроде FireFox). Кроме того, чтобы выполнить этот код у себя на сервере, не забудьте поместить файлы в папку, где есть права на выполнение PHP.

Если по выбору из подчинённого списка нужно что-то выполнять, делайте это любым яваскриптом. Например, изменив в файле index.html тег списка "Город" на

<select id="subList_id" name="subList_id" style="width:150px" onchange="go();">
</select>

и дописав в тег <script> функцию вроде

function go () {
 var index=document.getElementById('subList_id').options.selectedIndex;
 alert (document.getElementById('subList_id').options[index].value);
 location.href='http://nickolay.info';
}

мы добъёмся того, что по выбору другого города в созданном подчинённом списке Javascript-функция go() покажет, что выбрано, стандартным методом alert и сменит текущий URL на мой указанием нового location.href.

Скачать исходник скрипта в архиве ZIP (4 Кб)

гостевая; E-mail