Загрузка выпадающего списка AJAX
Категория JavaScripts (jQuery, 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 (), иначе не будет работать.
Отслеживаем изменения в списках: