Съдържание
Много пъти при програмиране на страници с pHp и отправяне на заявки към база данни трябва да опресняваме уеб страницата, така че php да се обработва на сървъра, да се консултира с базата данни и след това да върне резултата.Това пренасочване на мрежата обикновено отнема няколко секунди в някои случаи, показвайки на потребителя празна страница, докато данните се обработват и показват. За да постигнем по -прозрачен интерфейс за потребителя при отправяне на заявки към сървъра, можем да използваме AJAX, която е технологията, която ще ни позволи да правим заявки на уеб страница, които се нуждаят от отговор от сървъра, без да го презареждат. Ще започнем пример с уеб листинг за управление на агенция за превозни средства.
Първо ще създадем базата данни в Mysql за да направите това, използвайте ни Phpmyadmin. Под SQL код.
1) Ние създаваме базата данни
CREATE DATABASE auto_agency;
2) След това ще създадем таблиците
- а) Структура на масата за масата на превозните средства
СЪЗДАЙТЕ ТАБЛИЦА, АКО НЯМА „превозни средства“ („id“ int (10) NOT NULL AUTO_INCREMENT, „vehicle_type“ int (255) DEFAULT NULL, „характеристики“ текст, „mark“ varchar (255) DEFAULT NULL, „model“ varchar ( 255) DEFAULT NULL, `normal_price` decimal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY KEY `id`)) ДВИГАТЕЛ = СИГНАЛ НА МАЙЗАМ ПО УМОЛЧЕНИЕ = латински1 AUTO_INCREMENT = 1;
- б) Структура на таблицата за таблицата с маркировки
СЪЗДАЙТЕ ТАБЛИЦА, АКО НЕ СЪЩЕСТВАВА „марки“ („id“ int (11) NOT NULL AUTO_INCREMENT, „vehicle_type“ int (10) DEFAULT NULL, `mark` varchar (200) DEFAULT NULL, PRIMARY KEY (` id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- в) Вмъкваме търговските марки
ВМЕСТВАЙТЕ „марки“ („id“, „превозно средство -тип“, „марка“) СТОЙНОСТИ (1, 1, „HONDA“), (3, 1, „AUDI“), (4, 1, „BMW“),
- г) Структура на таблицата за таблицата с модели
CREATE TABLE IF NOT EXISTS `models` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL,` идентификатор на марката` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL , ПРЕДВАРИТЕЛЕН КЛЮЧ (`id`)) ДВИГАТЕЛ = МАЙЗАМ ПО УМОЛЧЕНИЕ ЧАРСЕТ = латински1 AUTO_INCREMENT = 1;
- д) Вмъкваме някои данни в таблицата с модели
ВМЕСТВАНЕ НА „модели“ („id“, „vehicle_type“, „brand id“, „model“) СТОЙНОСТИ (1, 1, 1, „ACCORD“), (2, 1, 1, „JAZZ“), (3 , 1,1, „CIVIC“);
- е) Структура на таблицата за таблица тип_vehiculo
СЪЗДАЙТЕ ТАБЛИЦА, АКО НЕ СЪЩЕСТВА `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;
- ж) Вмъкваме някои данни в таблицата type_vehiculo
ВМЕСТВАНЕ НА `превозно средство_тип` (` id`, `превозно средство_тип`) СТОЙНОСТИ (1, 'Автомобили'), (2, 'Мотоциклети')
Досега сме създали цялата база данни.
1) Свържете се с базата данни Mysql, като създадете файла config.php
Ще създадем уеб страница, която ще се нарича index.php, където ще имаме кода за показване на списъка с превозни средства и след това ще филтрираме списъка с jquery. Оформлението, което използваме за урока, е доста просто.
След това създаваме горния панел:
| Превозни средства | Търговски марки | Модели |
| За да изберете | За да изберете | За да изберете |
След това ще дойде кодът на списъка с sql заявки, след това div ще служи за показване на филтрирания списък:
| Превозно средство | Марка | Модел | Снимка | Действия | |
 | Промяна | ||||
Сега, когато списъкът работи, трябва да създадем филтъра с Jquery и да програмираме функционалността, свързана с select. Първият избор на Vehicle добавяме заявка и променяме select както следва:
За да изберете
При изпълнение, избраният ще бъде зареден с превозните средства:
Ще създадем файл, наречен functions.js, за да съхранява кода на Jquery и ще го добавим към страницата под предишния скрипт, както следва:
Първият скрипт ще бъде този, който при избора на тип превозно средство активира избора с марките
$ (function () {$ ("# vehicle"). change (function () {// скриптът се активира, когато избирам избрания автомобил = $ (this) .val () // Взимам избраната стойност/ /изпращане на страница, която ще направи sql заявката и ще върне данните, които да постави в избраното $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + превозно средство, функция (данни) { $ ("#mark"). html (data); // Взимам резултата и вмъквам данните в маркировката за избор});});}); Създаваме файла Brand.php, който ще бъде този, който ще изпълни заявката, която след това ще бъде заредена в Избрани марки:
По този начин при избора на тип превозно средство се активират избраните марки, съответстващи на типа превозно средство.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Избрана стойност $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ марка, функция (данни) {$ (" # модел "). html (данни); // Взимам резултата от страницата и вмъквам данните в избраното});});}); Създаваме файла models.php, за да изпълним заявката:
И накрая, когато избираме модела, ще добавим същия скрипт, който ни показва списъка, но филтриран според избраните опции и ще присвоим резултата на div id = "list"
Скриптът juqery, който активира списъка от избрания модел, ще бъде
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Избрана стойност $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ модел, функция (данни) {$ (" # списък "). html (данни); // Взимам резултата от страницата и вмъквам данните в списъка div});});}) ; Файлът listing.php, който ще изпълни филтърната заявка:
| Превозно средство | Марка | Модел | Снимка | Действия | |
| Промяна | ||||
И накрая, както е примерът с работещи филтри, няма да липсва възстановяването на списъка към оригинала и регистрирането на превозното средство, което ще видим в друг урок.
