Делаем меню сайта на ajax!

Рейтинг: 0Ответов: 2Опубликовано: 17.04.2015

Добрый день, дорогие друзья! В рамках развития своего интеллекта и приобретения новых полезных навыков, решил попробовать сделать меню при помощи технологии ajax.

Задача стоит следующим образом.
Имеем некую таблицу в БД. В ней указано следующее: материнский пункт меню, дочерний пункт меню, имя дочернего пункта и т.п.

Хочу сделать следующее:

-Мама
--Дочка
-Папа
--Сынок
---Сынок-сынка =)

Проще говоря, основные пункты меню Мама и Папа. Наводим мышь на один из этих пунктов (мама или папа) и из БД подгружаются все его дочерние пункты (сынок или дочка). Если навести на мышь на подпункт ajax подтягивает данные о подпунктах этого пункта.

Вот такую задачу задал я себе и что-то пока никак не придумаю как это адекватно реализовать. Моих скромных знаний ajax не достаточно для самостоятельного решения оказалось. Прошу Вашей помощи и буду благодарен за любую хорошую идею.

javascript ajax
Источник: Stack Overflow на русском

Ответы

▲ 2

Если пунктов и правда мало ( как в вашем случае ), то лучше подгружать все дерево в виде JSON строки со вложенностью, и потом циклом/рекурсией строить это дело. Но если представить, что у вас этих дочерних веток будет миллион, тогда ответ выше подходит ( в виду повышения скорости загрузки данных )
Сначала загружаем верхний уровень, пусть у него id/lvl (называйте как хотите) равен 0, а дальше определиться как будут идти ваши id, по порядку записей в бд или каким-то еще способом ( второй подразумевает наличие еще одного поля ).
Из бд выбираем элементы, у которых поле родитель = нашему id. Отправляем ввиде json клиенту, где через тот же цикл выводим данные

▲ 1

Можно грузить всё дерево целиком, но если подгружать, то при выводе меню первого уровня (корневое), а атрибутах указываем ИД. По наведению/клику лезем аяксом на сервер и подгружаем потомки элемента с этим ИД. Ну и дальше аналогично, главное что бы каждый пункт меню был известен — было его ИД, по которому можно понять кто он и что, есть ли у него вложенные и т.д.

Соотв. обращения аякса должны быть к скрипту на сервере, который возвращает данные по заданному ид. Можешь использовать JQuery Ajax, в сети полно документации и примеров, всё просто.