Загрузка выпадающего списка AJAX

Наша задача: Загрузка выпадающего списка (select). Такие списки очень удобны, так как страница не будет перезагружатся после каждого выбора элемента списка. Список будет заполнен по технологии AJAX. Для решения нашей задачи мы сделаем простейшую доску объявлений (!) =)

Как будет работать?

У нас есть база данных объявлений, которая содержит категории товаров, их типы и сами объявления. Все это мы будем подгружать в списки. Пользователь открывает нашу доску объявлений и видит 2 выпадающих списка и 1 контейнер (div) для объявлений. Первый select это категории, их у нас будет 3: Недвижимость, Hi-tech, Услуги. Второй выпадающий список – подкатегории объявлений (например, для категории “Недвижимость” это 1-комнатные, 2-комнатные и т.д.). Пользователь выбирает категорию “Недвижимость” – второй выпадающий список заполняется подкатегориями. Если выбирает подкатегорию – выводятся объявлений. И все это друзья мои, без единой перезагрузки!, ВСЁ благодаря технологии AJAX.

База данных

Итак, мы разобрались как будет все работать, теперь приступаем к самой реализации нашей задачи “Загрузка выпадающего списка AJAX“.

Создайте таблицу в phpMyAdmin. И назовите его test. Импортируйте в него записи:


CREATE TABLE IF NOT EXISTS `announcements` (
`id` int(4) NOT NULL auto_increment,
`id_type` int(2) NOT NULL,
`name` varchar(255) NOT NULL,
`text` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
INSERT INTO `announcements` (`id`, `id_type`, `name`, `text`) VALUES
(1, 1, 'Продаю квартиру', 'Продаю однокомнатную квартиру в центре. Дорого.'),
(2, 1, 'Квартира. Дешево.', 'Продаю однокомнатную квартиру в центре. 2-й этаж.'),
(3, 4, '4-х комнатную квартиру продаю.', 'Срочно. 4 млн руб. Контакты.'),
(4, 3, 'Продам', 'на ул. Ленина.'),
(5, 7, 'Rolsen', 'Продаю телевизоры Rolsen (Элт) со встроенным DVD диагональ-36 см.-3500, SVA LT 2003-ЖК,диагональ 52 см.-6500т.р. имеется вход под монитор,Trony 1900-ЖК,диагональ 48см-8500т.р.имеется вход под монитор.'),
(6, 5, 'AMD Atlon', 'продаю компьютер!!! \r\nпроцессор AMD Atlon x2 6000+ \r\nВидео карта Geforce GT9800 DDR3 512.мб 256.б \r\nсо всеми комплектующими за 17тр торг.срочно');
CREATE TABLE IF NOT EXISTS `categories` (
`id_cat` int(2) NOT NULL auto_increment,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id_cat`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
INSERT INTO `categories` (`id_cat`, `name`) VALUES
(1, 'Недвижимость'),
(2, 'Hi-tech'),
(3, 'Услуги');
CREATE TABLE IF NOT EXISTS `types` (
`id_type` int(2) NOT NULL auto_increment,
`id_cat` int(2) NOT NULL,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id_type`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;
INSERT INTO `types` (`id_type`, `id_cat`, `name`) VALUES
(1, 1, '1-комнатные'),
(2, 1, '2-комнатные'),
(3, 1, '3-комнатные'),
(4, 1, '4-комнатные'),
(5, 2, 'Компьютеры'),
(6, 2, 'Ноутбуки'),
(7, 2, 'Телевизоры'),
(8, 2, 'Другое');

если возникла ошибка возможно это изза того, что у Вас нет поддержки InnoDB. Просто удалите все строки ENGINE=InnoDB с файла импорта.

Соединение с БД

Создайте файл db.php:

Выпадающие списки

Вставьте этот код в страницу, куда хотите использовать зависимые select’ы. У меня это файл index.php


Нет объявлений

Скрипт AJAX’а

Вставить код между тегами в файле index.php
Не забудьте перед этим кодом подключить jQuery (), иначе не будет работать.
Отслеживаем изменения в списках:

выберите категорию...');
return(false);
}
$('#types').html('
загрузка...');
$.get( // AJAX
url, // отправкак запроса к файлу get.php (см. выше)
"id_cat=" + id, // отправляем по методу GET
function (result) {
if (result == 'error') {
$('#types').html('Ошибка!');
return(false);
} else { // если получили список подкатегорий
$('#types').html(result);
$('#types').attr('disabled', false);}
},
"json" // JSON);
});

$('#types').change(function () { // // выбор из подкатегории
var id = $(this).val();
$('#info').html('загрузка...');
$.get(
url,
"id_type=" + id,
function (result) {
if (result == 'error') {
$('#info').html('Нет объявлений');
return(false);
} else {
$('#info').html(result);}
},
"json");
});

});

Файл get.php

Этот файл берет записи из базы данных и отдает файлу index.php

0){

while ($row = mysql_fetch_array($sql)){

$result .= '

'.$row['name'].'';

}

} else $result = 'error';

}

if ($_GET['id_type'] && is_numeric($_GET['id_type'])){

$id = $_GET['id_type'];

$sql = mysql_query("SELECT * FROM announcements WHERE id_type=".$id);

if(mysql_num_rows($sql)>0){

while ($row = mysql_fetch_array($sql)){

$result .= '

'.$row['name'].'

'.$row['text'].'

';

}

} else $result = 'error';

}

print json_encode($result);

?>

Вот и все!

Если, что либо не понятно скачайте Исходники или спрашивайте в комментах.

Постовые:

Другие посты, близкие по теме:

  1. Загрузка файла одним кликом
  2. Проверка на сложность пароля
  3. Вводный курс jQuery – Тест
  4. Собственный поисковик: Веб интерфейс (продолжение)
  5. Новостной блок своими руками на JavaScript
]]>

Добавить в закладки

]]>

Теги: , , , юзабилити

февраля 10, 2010

2 комментариев по “Загрузка выпадающего списка AJAX”

  1. ]]> ]]> сказал:
    февраля 13, 2010 в 05:03

    почему не читает русскую кириллицу, если вводишь текст на русском то оно его не выводит, а если вводишь на енгельском то ради бога.

  2. ]]> admin ]]> сказал:
    февраля 15, 2010 в 14:34

    посмотри кодировки фaйлов, они у мeня utf-8 бeз BOM

Оставьте комментарий: