Obsah
Při programování stránek s pHp a zadávání dotazů do databáze mnohokrát musíme webovou stránku aktualizovat, aby bylo php zpracováno na serveru, nahlédnout do databáze a poté vrátit výsledek.Toto přesměrování webu obvykle trvá několik sekund, v některých případech se uživateli zobrazí prázdná stránka během zpracování a zobrazení dat. Abychom dosáhli transparentnějšího rozhraní pro uživatele při zadávání požadavků na server, můžeme použít AJAX, což je technologie, která nám umožní provádět dotazy na webové stránce, které vyžadují odpověď serveru, aniž by bylo nutné jej znovu načíst. Začneme příkladem s webovým výpisem pro správu Vehicle Agency.
Nejprve vytvoříme databázi v MySQL k tomu použijte nás Phpmyadmin. Pod SQL kód.
1) Vytvoříme databázi
VYTVOŘIT DATABÁZI auto_agency;
2) Poté vytvoříme tabulky
- a) Struktura stolu pro stůl vozidel
VYTVOŘIT TABULKU, KDYŽ NEEXISTUJE `vozidla` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` charakteristický` text, `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 ')) MOTOR = VÝCHOZÍ CHARSET MyISAM = latin1 AUTO_INCREMENT = 1;
- b) Struktura tabulky pro tabulku značek
VYTVOŘIT TABULKU, POKUD NEJSOU EXISTUJÍ `značky` (` 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;
- c) Vkládáme ochranné známky
VLOŽTE DO HODNOT (značek, id, vozidel, značek) hodnot (1, 1, HONDA), (3, 1, AUDI), (4, 1, BMW),
- d) Struktura tabulky pro tabulku modelů
VYTVOŘIT TABULKU, POKUD NEJSOU EXISTUJÍ `modely` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL,` brand id` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL , PRIMARY KEY (`id`)) MOTOR = VÝCHOZÍ CHARSET MyISAM = latin1 AUTO_INCREMENT = 1;
- e) Vložíme nějaká data do tabulky modelů
VLOŽTE DO `modelů` (` id`, `vehicle_type`,` brand id`, `model`) HODNOTY (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, „OBČAN“);
- f) Struktura tabulky pro tabulku type_vehiculo
VYTVOŘIT TABULKU, POKUD NEJSOU EXITTS `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) Vložíme nějaká data do tabulky type_vehiculo
VLOŽTE DO HODNOTY `vehicle_type` (` id`, `vehicle_type`) (1, 'Auta'), (2, 'Motocykly')
Zatím jsme vytvořili celou databázi.
1) Připojte se k databázi Mysql vytvořením souboru config.php
Vytvoříme webovou stránku, která se bude jmenovat index.php, kde budeme mít kód pro zobrazení seznamu vozidel a poté filtrujeme seznam pomocí jquery. Rozložení, které používáme pro tutoriál, je docela jednoduché.
Poté vytvoříme horní panel:
| Vozidla | Ochranné známky | Modely |
| Vybrat | Vybrat | Vybrat |
Poté přijde kód seznamu s dotazy SQL, div pak poslouží k zobrazení filtrovaného seznamu:
| Vozidlo | Značka | Modelka | Fotografie | Akce | |
 | Modifikovat | ||||
Nyní, když máme seznam funkční, musíme vytvořit filtr pomocí Jquery a naprogramovat funkce související s výběrem. K prvnímu výběru vozidla přidáme dotaz a výběr upravíme následovně:
Vybrat
Při provádění bude výběr načten vozidly:
Vytvoříme soubor s názvem functions.js pro uložení kódu Jquery a přidáme jej na stránku pod předchozí skript následovně:
První skript bude ten, který při výběru typu vozidla aktivuje výběr se značkami
$ (funkce () {$ ("# vozidlo"). change (funkce () {// skript se aktivuje, když vyberu vozidlo vybraného vozidla = $ (this) .val () // vezmu vybranou hodnotu/ /poslat na stránku, která provede dotaz sql a vrátí data, která vloží do select $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + vozidlo, funkce (data) { $ ("#mark"). html (data); // vezmu výsledek a vložím data do výběrové značky});});}); Vytvoříme soubor brands.php, který bude provádět dotaz, který bude poté načten do Select Brands:
Při výběru typu vozidla se tedy aktivují vybrané značky odpovídající typu vozidla.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Selected value $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ značka, funkce (data) {$ (" # model "). html (data); // vezmu výsledek stránky a vložím data do výběru});});}); Vytvoříme soubor models.php k provedení dotazu:
Nakonec při výběru modelu přidáme stejný skript, který nám ukazuje seznam, ale filtruje se podle vybraných možností a výsledek přiřadíme div id = "list"
Skript juqery, který aktivuje seznam z vybraného modelu, bude
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Selected value $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ model, funkce (data) {$ (" # listing "). html (data); // vezmu výsledek stránky a vložím data do seznamu div});});}); Soubor listing.php, který provede dotaz filtru:
| Vozidlo | Značka | Modelka | Fotografie | Akce | |
| Modifikovat | ||||
Nakonec, jak je tomu u příkladu s fungujícími filtry, jeden by chyběl k obnovení seznamu na původní a registraci vozidla, které uvidíme v dalším tutoriálu.
