учебные пособия

Генерация динамических списков с Jquery, pHp и MySQL

  Дата публикации: May/2024
{title}

Много раз при программировании страниц с помощью pHp и запросов к базе данных мы должны обновлять веб-страницу, чтобы php обрабатывался на сервере, проверять базу данных и затем возвращать результат.
Такое перенаправление в Интернете обычно занимает несколько секунд, в некоторых случаях показывая пользователю пустую страницу во время обработки и отображения данных. Чтобы получить более прозрачный интерфейс для пользователя при отправке запросов на сервер, мы можем использовать AJAX - технологию, которая позволит нам делать запросы на веб-странице, которые требуют ответа от сервера, без перезагрузки. Мы начнем пример с веб-списка для управления агентством транспортных средств.
Сначала мы создадим базу данных в Mysql для использования Phpmyadmin . Далее код SQL .
1) Создаем базу данных 

 СОЗДАТЬ БАЗУ ДАННЫХ agency_autos;

2) Затем мы создадим таблицы
  • а) Структура стола для стола транспортного средства
 СОЗДАЙТЕ ТАБЛИЦУ, ЕСЛИ НЕ СУЩЕСТВУЕТ `Vehicles` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL, ` features` text, `mark` varchar (255) DEFAULT NULL, ` model` varchar ( 255) ПО УМОЛЧАНИЮ NULL, `normal_price` десятичное число (10.2) ПО УМОЛЧАНИЮ NULL, ` description` varchar (255) ПО УМОЛЧАНИЮ NULL, `photo1` varchar (255) ПО УМОЛЧАНИЮ NULL, ` photo2` varchar (255) ПО УМОЛЧАНИЮ NULL, ПЕРВИЧНЫЙ КЛЮЧ ( `id`)) ENGINE = MyISAM CHARSET ПО УМОЛЧАНИЮ = latin1 AUTO_INCREMENT = 1;
  • б) Структура таблицы для таблицы меток
 СОЗДАЙТЕ ТАБЛИЦУ, ЕСЛИ НЕ СУЩЕСТВУЕТ `marks` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (10) DEFAULT NULL, ` mark` varchar (200) DEFAULT NULL, ПЕРВИЧНЫЙ КЛЮЧ (`id`)) ENGINE = CHISSET ПО УМОЛЧАНИЮ MyISAM = latin1 AUTO_INCREMENT = 1;
  • в) Вставьте метки
 INSERT INTO `бренды` (` id`, `vehicle_type`, ` brand`) ЗНАЧЕНИЯ (1, 1, «HONDA»), (3, 1, «AUDI»), (4, 1, «BMW»),
  • г) Структура таблицы для таблицы моделей
 СОЗДАТЬ ТАБЛИЦУ, ЕСЛИ НЕ СУЩЕСТВУЕТ `models` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL, ` idmarca` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL, ПЕРВИЧНЫЙ КЛЮЧ (`id`)) ENGINE = MyISAM CHARSET DEFAULT = latin1 AUTO_INCREMENT = 1;
  • д) вставляем некоторые данные в таблицу моделей
 INSERT INTO `models` (` id`, `vehicle_type`, ` idmarca`, `model`) VALUES (1, 1, 1, « ACCORD »), (2, 1, 1, « JAZZ »), (3, 1, 1, «СИВИК»);
  • f) Структура таблицы для таблицы vehicle_type
 СОЗДАЙТЕ ТАБЛИЦУ, ЕСЛИ НЕ СУЩЕСТВУЕТ `vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` varchar (200) DEFAULT NULL, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
  • g) Вставляем некоторые данные в таблицу vehicle_type
 INSERT INTO `vehicle_type` (` id`, `vehicle_type`) ЗНАЧЕНИЯ (1, « Автомобили »), (2, « Мотоциклы »)

До этого мы создаем всю базу данных.

{title}

Структура веб-страницы


Мы начинаем структуру веб-страницы с php, пример будет разработан на плоском php, но его можно адаптировать к любой среде.
1) Подключитесь к базе данных Mysql, создав файл config.php 

Мы создадим веб-страницу, которая будет называться index.php, где у нас будет код для отображения списка транспортных средств, а затем отфильтруем список с помощью jquery. Дизайн, который мы используем для этого урока, довольно прост. 
{title}

Код внутри index.php для показа дизайна выглядит следующим образом: 

Затем мы создаем верхнюю панель: 
брендымоделивыбратьвыбрать
транспортные средства
выбрать

Затем код списка будет поставляться с запросами sql, тогда div будет отображать отфильтрованный список: 
знакмодельфото$ value) {$ row [$ key] = полоски ($ value); }?> 
автомобиль
действия


Теперь, когда у нас запущен список, нам нужно будет создать фильтр с помощью Jquery и запрограммировать функциональность, связав select. При первом выборе автомобиля мы добавляем запрос и модифицируем его следующим образом: 
 выбрать 

При выполнении выбор будет загружен транспортными средствами: 
{title}

Теперь для этого есть Jquery, который мы добавим в index.php в верхней строке перед включением, библиотеку Jquery, загруженную с //jquery.com/download/, или скомпонуем следующий скрипт и используем его по внешнему пути. 

Мы создадим файл functions.js для хранения кода Jquery и добавим его на страницу под предыдущим скриптом следующим образом: 

Первый скрипт будет тот, который при выборе типа транспортного средства активирует выбор с отметками 
 $ (function () {$ ("# vehicle"). change (function () {// сценарий активируется, когда я выбираю автомобиль. select = $ (this) .val () // я принимаю выбранное значение // send на страницу, которая выполнит SQL-запрос и вернет мне данные для добавления в select $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + vehicle, function (data) {$ ( "#mark"). html (data); // Я беру результат и вставляю данные в метку выбора});});}); 

Мы создаем файл marks.php, который будет делать запрос, который затем будет загружен в выбор брендов: 

Таким образом, при выборе типа транспортного средства активируются метки выбора, соответствующие типу транспортного средства. 
{title}

Теперь мы активируем выбранные модели из Marks, для этого добавим следующий код в functions.jps: 
 $ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Выбранное значение $ .get ("http: // localhost / projects / agencyautos / model .php? idmarca = "+ mark, function (data) {$ (" # model "). html (data); // Я беру результат страницы и вставляю данные в выборку});});}); 

Мы создаем файл models.php для выполнения запроса: 

Наконец, при выборе модели мы добавим тот же сценарий, который показывает нам список, но отфильтрованный в соответствии с выбранными параметрами, и результат будет присвоен div id = ”list” 
Сценарий juqery, который активирует список из выбранной модели, будет 
 $ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Выбранное значение $ .get ("http: // localhost / projects / agencyautos / list .php? idmodel = "+ model, function (data) {$ (" # перечисление "). html (data); // Я беру результат страницы и вставляю данные в список div});});}) ; 

Файл list.php, который будет выполнять запрос фильтра: 
знакмодельфото$ value) {$ row [$ key] = полоски ($ value); }?> 
автомобиль
действия

Наконец, как пример с работающими фильтрами, можно было бы пропустить восстановление списка до исходного и зарегистрировать транспортное средство, которое мы увидим в другом уроке. 
{title}

внимание
Продолжение и более подробную информацию об этом уроке введите здесь
  • 0
$config[ads_text6] not found






СТАТЬЯ ПО ТЕМЕ Запустите средство диагностики оперативной памяти Windows 10