Последовательный выбор с использованием AJAX, jQuery и PHP
В данном уроке мы построим набор элементов для последовательного выбора. Выбор опции будет приводить к обновлению страницы, показывая пользователю дополнительные опции для уточнения выбора. Опции выбора описаны на серверной стороне с помощью PHP, поэтому будет просто переделать пример на использование базы данных.
Разметка HTML
Элемент выбора имеет заголовок, который описывает выбираемый параметр. Заголовок и элемент выбора заключены в элемент LI.
При добавлении вопросов дополнительные элементы LI создается кодом jQuery. Все они располагаются в неупорядоченном списке #questions. Заголовок и опции данных пунктов обрабатываются как JSON, что будет видно в части PHP. вот какая разметка генерируется для пункта li:
index.html – генерируемый код
<ul id="questions"> <!-- Генерируется кодом jQuery --> <li> <p>Что желаете купить?</p> <select data-placeholder="Выберите категорию продукта"> <option data-connection="phoneSelect" value="Phones">Телефоны</option> <option data-connection="notebookSelect" value="Notebooks">Ноутбуки</option> <option data-connection="tabletSelect" value="Tablets">Планшеты</option> </select> </li> <!-- Следующая секция вставляется в зависимости от выбора --> </ul>
Демонстрационная страница не использует элемент браузера. Потому что мы подключаем плагин jQuery Chosen для преобразования нашего элемента в стильный виджет, который вы видите на экране. Нужно просто вызвать метод chosen() для элемента select, а все остальное сделает плагин.
Код jQuery
Вот что делает наш код jQuery - он получает информацию для элемента выбора в виде JSON с сервера, генерирует разметку HTML и устанавливает обработчики событий для отслеживания изменений. Если элемент выбора меняется, то процесс повторяется с новыми пунктами.
В коде используется две функции JavaScript:
- refreshSelects запускает плагин Chosen и привязывает обработчики событий каждый раз, когда новый пункт добавляется на страницу;
- fetchSelect запрашивает фид JSON с сервера и генерирует разметку для ответа.
assets/js/script.js
$(function(){ var questions = $('#questions'); function refreshSelects(){ var selects = questions.find('select'); // Улучшаем элемент selects с помощью плагина Chose selects.chosen(); // Ждем изменений selects.unbind('change').bind('change',function(){ // Выбранная опция var selected = $(this).find('option').eq(this.selectedIndex); // Ищем атрибут data-connection var connection = selected.data('connection'); // Удаляем следующий контейнер li (к=если есть) selected.closest('#questions li').nextAll().remove(); if(connection){ fetchSelect(connection); } }); } var working = false; function fetchSelect(val){ if(working){ return false; } working = true; $.getJSON('ajax.php',{key:val},function(r){ var connection, options = ''; $.each(r.items,function(k,v){ connection = ''; if(v){ connection = 'data-connection="'+v+'"'; } options+= '<option value="'+k+'" '+connection+'>'+k+'</option>'; }); if(r.defaultText){ // Плагин Chose требует, чтобы был добавлен пустой элемент опции // если нужно выводить текст "Пожалуйста, выберите" options = '<option></option>'+options; } // Строим разметку для раздела select $('<li>\ <p>'+r.title+'</p>\ <select data-placeholder="'+r.defaultText+'">\ '+ options +'\ </select>\ <span class="divider"></span>\ </li>').appendTo(questions); refreshSelects(); working = false; }); } $('#preloader').ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }); // В начале загружаем выбор продукта fetchSelect('productSelect'); });
Отлично! Теперь осталось сделать генерацию фида JSON. Обратите внимание, что функция fetchSelect получает в качестве аргумента строку. Это ключ, который передается в код PHP, обозначающий, какой набор пунктов нам требуется.
Вот как выглядит простой ответ из нашего скрипта PHP:
{ "items": { "Телефоны": "phoneSelect", "Ноутбуки": "notebookSelect", "Планшеты": "" }, "title": "Что желаете купить?", "defaultText": "Выберите категорию продукта" }
Функция fetchSelect проходит циклом все пункты и использует ключи как содержание элементов опций, а значения - как указатели на следующие пункты. Выбор пунктов "Телефоны" и "Ноутбуки" в данном примере будет приводить к генерации новых элементов выбора, а пункта "Планшеты" - нет.
PHP
Нам нужно где-то хранить информацию о элементах выбора, опциях, которые в них содержатся, и взаимосвязях между ними. В базе данных для решения задачи может использоваться набор строк. Но в нашем примере мы храним данные в статических объектах. Для решения мы определяем простой класс, который будет содержать информацию об элементе выбора.
ajax.php / 1
// Будем использовать данный класс для определения каждого элемента select class SelectBox{ public $items = array(); public $defaultText = ''; public $title = ''; public function __construct($title, $default){ $this->defaultText = $default; $this->title = $title; } public function addItem($name, $connection = NULL){ $this->items[$name] = $connection; return $this; } public function toJSON(){ return json_encode($this); } }
Теперь нам нужно только создать экземпляр данного класса для каждого элемента выбора и вызвать методaddItem() для добавления опций. Данный метод имеет опциональный параметр $connection, который содержит имя зависимого элемента выбора.
ajax.php / 2
/* конфигурация элементов select */ // Продукт $productSelect = new SelectBox('Что желаете купить?','Выберите категорию продукта'); $productSelect->addItem('Телефоны','phoneSelect') ->addItem('Ноутбуки','notebookSelect') ->addItem('Планшеты','tabletSelect'); // Типы телефонов $phoneSelect = new SelectBox('Какой тип телефона вы хотите?', 'Выберите тип телефона'); $phoneSelect->addItem('Смартфон','smartphoneSelect') ->addItem('Обычный телефон','featurephoneSelect'); // Смартфоны $smartphoneSelect = new SelectBox('Какой смартфон вам нужен?','Выберите модель смартфона'); $smartphoneSelect->addItem('Samsung Galaxy Nexus') ->addItem('iPhone 4S','iphoneSelect') ->addItem('Samsung Galaxy S2') ->addItem('HTC Sensation'); // Обычные телефоны $featurephoneSelect = new SelectBox('Какой телефон вам нужен?','Выберите модель телефона'); $featurephoneSelect->addItem('Nokia N34') ->addItem('Sony Ericsson 334') ->addItem('Motorola'); // Цвет iPhone $iphoneSelect = new SelectBox('Какой цвет аппарата вам нравится?','Выберите цвет'); $iphoneSelect->addItem('Белый')->addItem('Черный'); // Выбор ноутбука $notebookSelect = new SelectBox('Какой ноутбук вы хотите купить?', 'Выберите модель ноутбука'); $notebookSelect->addItem('Asus Zenbook','caseSelect') ->addItem('Macbook Air','caseSelect') ->addItem('Acer Aspire','caseSelect') ->addItem('Lenovo Thinkpad','caseSelect') ->addItem('Dell Inspiron','caseSelect'); // Планшет $tabletSelect = new SelectBox('Какой планшет является предметом вашей мечты?', 'Выберите модель планшета'); $tabletSelect->addItem('Asus Transformer','caseSelect') ->addItem('Samsung Galaxy Tab','caseSelect') ->addItem('iPad 16GB','caseSelect') ->addItem('iPad 32GB','caseSelect') ->addItem('Acer Iconia Tab','caseSelect'); // Сумка $caseSelect = new SelectBox('Возьмёте защитный чехол к вашему аппарату?',''); $caseSelect->addItem('Да')->addItem('Нет'); // Регистрируем все пункты выбора в массиве $selects = array( 'productSelect' => $productSelect, 'phoneSelect' => $phoneSelect, 'smartphoneSelect' => $smartphoneSelect, 'featurephoneSelect' => $featurephoneSelect, 'iphoneSelect' => $iphoneSelect, 'notebookSelect' => $notebookSelect, 'tabletSelect' => $tabletSelect, 'caseSelect' => $caseSelect );
Выше приведенный код определяет несколько элементов выбора и размещает их в массиве $selects. Когда скрипт получает запрос AJAX, он просматривает данный массив и возвращает ответ:
ajax.php / 3
// Будем просматривать данный массив и возвращать выбранный объект в зависимости // от парметра $_GET['key'] передаваемого jQuery // Вы можете модифицировать код для выбора результата из таблицы if(array_key_exists($_GET['key'],$selects)){ header('Content-type: application/json'); echo $selects[$_GET['key']]->toJSON(); } else{ header("HTTP/1.0 404 Not Found"); header('Status: 404 Not Found'); }
Вызывая метод toJSON() мы выводим все данные для элементов выбора в формате JSON, который используется клиентской частью jQuery.
Готово!
Скрипт можно модифицировать для работы с базой данных. Описанный метод поможет сформировать опросы посетителей, представление различных продуктов, выбор правильных опций для товаров и так далее.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/n-9i3WWdxSE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.