Загрузка выпадающего списка 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:

< ?php
mysql_connect('localhost','root','') or die("Невозможно соединиться с базой данных!"); // соединение с сервером
mysql_select_db('test') or die(mysql_error()); // выбор базы данных
mysql_query('SET NAMES utf8'); ?>

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

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

<select id="categories">
<option value="0">выберите категорию...</option>
<option value="'.$data['id_cat'].'">'.$data['name'].'</option>
</select>
<select id="types" disabled="disabled">
<option value="0">выберите категорию...</option>
</select>
<div id="info" style="width: 300px; border: 1px dotted #000; padding: 10px; margin: 10px;">Нет объявлений</div>

Скрипт AJAX’а

Вставить код между тегами в файле index.php
Не забудьте перед этим кодом подключить jQuery (<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>), иначе не будет работать.
Отслеживаем изменения в списках:

<script>
$(document).ready(function () {
var url = 'get.php';  // файл к которому мы будем обращаться для получения записей из БД
$('#categories').change(function () { // выбор из категории
var id = $(this).val(); // берем value id выбранной категории
$('#types').attr('disabled', true);
if (id == '0') {
$('#types').html('');
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");
});

});
</script>

Файл get.php

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

<?php
require 'db.php'; // подключение к БД
if ($_GET['id_cat'] && is_numeric($_GET['id_cat'])){
$id = $_GET['id_cat'];
$sql = mysql_query("SELECT * FROM types WHERE id_cat=".$id);
if(mysql_num_rows($sql)>0){while ($row = mysql_fetch_array($sql)){
$result .= '<option value="'.$row['id_type'].'">'.$row['name'].'</option>';
}
} 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 .= '
<h3>'.$row['name'].'</h3>'.$row['text'];
}
} else $result = 'error';
}
print json_encode($result);
?>

Вот и все!

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

Постовые:

  1. рейтинг хостингов
  2. шаблоны Wordpress

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

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

Добавить в закладки
Memori БобрДобр Google Яндекс Твиттер del.icio.us Мистер Вонг МоёМесто MyScoop RuSpace Сто закладок

]]>

Теги: , , ,

февраля 10, 2010

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

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

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

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

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

  3. ]]>Никита]]> сказал:
    мая 6, 2010 в 17:43

    А как передать выбранные значения в переменную $_POST ?

  4. ]]>Никита]]> сказал:
    мая 6, 2010 в 18:52

    Вопрос решён:)

  5. ]]>Альберт]]> сказал:
    мая 25, 2010 в 01:33

    функция require на локальном сервере работает или нет?
    что-то у меня не поперло…

  6. ]]>Альберт]]> сказал:
    мая 25, 2010 в 01:34

    базу подключил… а во второй список ничего не приходит…

  7. ]]>Admin]]> сказал:
    мая 25, 2010 в 10:18

    2Альберт,
    попробуй напрямую вызвать файл get.php
    если там ошибка про json_encode(), то у тебя старая версия PHP, придется скачать код этой функции и вставить в начале файла get.php

    PS: если никак не получается, попробуй скачать исходники и запустить, если не получается, то подумаем над этим

  8. ]]>Альберт]]> сказал:
    мая 25, 2010 в 17:50

    Данные phpinfo()
    PHP Version 5.2.10
    json support – enabled
    json version – 1.2.1
    Вроде бы функция json включена?

  9. ]]>Альберт]]> сказал:
    мая 25, 2010 в 17:58

    Пробовал на сервере где установлена CMS DLE
    Сделал другой сервер.
    Чтобы исключить варианты в get.php тупо прописал:

    $result = “kvartirydoma”;
    echo $result;

    Это прокатило – во второй список вывалились эти данные.
    Видимо .htaccess косячит где-то… вот что ему не нравится… вопрос… :(

  10. ]]>Альберт]]> сказал:
    мая 25, 2010 в 18:01

    > $result = “kvartirydoma”;
    в смысле, конструкцию option для списка…

  11. ]]>Альберт]]> сказал:
    мая 25, 2010 в 18:03

    ой! не echo $result;
    а вот это:
    print json_encode($result);

  12. ]]>Альберт]]> сказал:
    мая 25, 2010 в 18:15

    СТОП!!!
    Проблема с кодировками… разбираюсь…

  13. ]]>Альберт]]> сказал:
    мая 25, 2010 в 18:42

    В utf-8 заработало….
    Только вот косячок заметил -
    Когда выбираем в первом списке категорию – во второй подгружаются типы, но при попытке выделить самую первую позицию в списке, то информация в div не изменяется… Если выделяется вторая и далее позиции, а потом первая – все нормально обновляется…

  14. ]]>Альберт]]> сказал:
    июня 6, 2010 в 17:08

    “id_cat=” + id, // отправляем по методу GET

    может подскажите, как в этом месте передать значение второй переменной?
    Спасибо заранее

  15. ]]>admin]]> сказал:
    июня 7, 2010 в 09:27

    2Альберт,
    “id_cat=”+id+”&a=”+a+”&b=”+b+…

    это как строка, просто плюсуете

  16. ]]>xDMK]]> сказал:
    июня 20, 2010 в 04:03

    У меня проблемма.. когда япоставил скрипт на локальный сервер он работал тока в utf8 но когда я перенёс на сервер и сделал тоже самое то списки плохо отображаются тоесть тока английские и самое интересное что тока types а первый раздел нормально. правдо зависит от кодировки. Есть ли другой способ вывода без измены скрипта

  17. ]]>Александр]]> сказал:
    сентября 2, 2010 в 21:59

    А в исходниках нет фрэйм ворка jquery.min.js а без этого не работает )()((((

  18. ]]>Александр]]> сказал:
    сентября 2, 2010 в 22:01

    В исходниках нет фэйка jquery.min.js а без него не работает а так скрипт не-плохой

  19. ]]>admin]]> сказал:
    сентября 3, 2010 в 09:12

    2Александр, jquery подключаем с гугла

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

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