Turinys
Daug kartų, kai programuojame puslapius su pHp ir pateikiame užklausas duomenų bazei, turime atnaujinti tinklalapį, kad php būtų apdorotas serveryje, susipažinti su duomenų baze ir tada grąžinti rezultatą.Šis žiniatinklio nukreipimas paprastai užtrunka kelias sekundes, kai kuriais atvejais vartotojui rodomas tuščias puslapis, kol duomenys yra tvarkomi ir rodomi. Norėdami pasiekti skaidresnę vartotojo sąsają teikdami užklausas serveriui, galime naudoti AJAX - technologiją, kuri leis mums pateikti užklausas tinklalapyje, į kurį reikia atsakyti iš serverio, jo neperkėlus. Pradėsime pavyzdį su žiniatinklio sąrašu, skirtu transporto priemonių agentūrai valdyti.
Pirmiausia sukursime duomenų bazę Mysql Norėdami tai padaryti, naudokitės mumis Phpmyadmin. Žemiau SQL kodas.
1) Kuriame duomenų bazę
CREATE DATABASE auto_agency;
2) Tada sukursime lenteles
- a) Transporto priemonių lentelės lentelės struktūra
KURTI LENTELĘ, JEI NĖRA „transporto priemonių“ („id“ int (10) NOT NULL AUTO_INCREMENT, „vehicle_type“ int (255) Numatytasis NULL, „charakteristikų“ tekstas, „mark“ varchar (255) DEFAULT NULL, „model“ varchar ( 255) DEFAULT NULL, `normal_price` dešimtainė dalis (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY KEY ( `id`)) VARIKLIS =„ MyISAM DEFAULT CHARSET “= latin1 AUTO_INCREMENT = 1;
- b) Žymų lentelės lentelės struktūra
KURTI LENTELĘ, JEI NĖRA „ženklai“ („id“ int (11) NOT NULL AUTO_INCREMENT, „vehicle_type“ int (10) Numatytasis NULL, „mark“ varchar (200) Numatytasis NULL, PAGRINDINIS RAKTAS („id“)) VARIKLIS = „MyISAM DEFAULT CHARSET“ = lotynų1 AUTO_INCREMENT = 1;
- c) Įterpiame prekių ženklus
INSERT INTO „markės“ („id“, „vehicle_type“, „brand“) VERTĖS (1, 1, „HONDA“), (3, 1, „AUDI“), (4, 1, „BMW“),
- d) Modelių lentelės lentelės struktūra
KURTI LENTELĘ, JO NĖRA „modeliai“ („id“ int (11) NOT NULL AUTO_INCREMENT, „vehicle_type“ int (200) DEFAULT NULL, „mark ID“ int (200) DEFAULT NULL, „model“ varchar (255) DEFAULT NULL , PAGRINDINIS RAKTAS („id“)) VARIKLIS = „MyISAM DEFAULT CHARSET“ = latin1 AUTO_INCREMENT = 1;
- e) Kai kuriuos duomenis įterpiame į modelių lentelę
INSERT INTO "modeliai" ("id", "vehicle_type", "brand id", "model") VALUES (1, 1, 1, "ACCORD"), (2, 1, 1, "JAZZ"), (3 , 1,1, „CIVIC“);
- f) Lentelės struktūra lentelės tipui_vehiculo
KURTI LENTELĘ, Jei NĖRA „transporto priemonės_ tipas“ („id“ int (10) NOT NULL AUTO_INCREMENT, „vehicle_type“ varchar (200) Numatytasis NULL, PAGRINDINIS RAKTAS („id“)) VARIKLIS = „InnoDB DEFAULT CHARSET“ = latin1 AUTO_INCREMENT = 1;
- g) Kai kuriuos duomenis įterpiame į lentelę type_vehiculo
INSERT INTO "vehicle_type" ("id", "vehicle_type") VALUES (1, "Automobiliai"), (2, "Motociklai") Iki šiol sukūrėme visą duomenų bazę.
1) Prisijunkite prie „Mysql“ duomenų bazės sukurdami failą config.php
Mes sukursime tinklalapį, kuris bus vadinamas index.php, kuriame turėsime kodą transporto priemonių sąrašui parodyti, o tada filtruosime sąrašą naudodami „jquery“. Pamokoje naudojamas išdėstymas yra gana paprastas.
Tada mes sukuriame viršutinį skydelį:
| Transporto priemonės | Prekių ženklai | Modeliai |
| Pasirinkti | Pasirinkti | Pasirinkti |
Tada ateis sąrašo kodas su sql užklausomis, o tada div parodys filtruotą sąrašą:
| Transporto priemonė | Prekės ženklas | Modelis | Nuotrauka | Veiksmai | |
 | Keisti | ||||
Dabar, kai sąrašas veikia, turime sukurti filtrą su „Jquery“ ir užprogramuoti pasirinkimo funkcijas. Pirmasis transporto priemonės pasirinkimas pridedame užklausą ir modifikuojame pasirinkimą taip:
Pasirinkti
Vykdant, pasirinktasis bus pakrautas su transporto priemonėmis:
Sukursime failą function.js, kad išsaugotume „Jquery“ kodą ir pridėtume jį prie puslapio, esančio po ankstesniu scenarijumi, taip:
Pirmasis scenarijus bus tas, kuris pasirenkant transporto priemonės tipą suaktyvina prekių ženklų pasirinkimą
$ (function () {$ ("# vehicle"). change (function () {// scenarijus suaktyvinamas, kai pasirenku pasirinktą transporto priemonę = $ (this) .val () // imu pasirinktą vertę/ /siųsti į puslapį, kuris atliks SQL užklausą ir grąžins duomenis į pasirinktą $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + transporto priemonė, funkcija (duomenys) { $ ("#mark"). html (duomenys); // Aš paimu rezultatą ir įterpiu duomenis į pasirinktą ženklą});});}); Mes sukuriame failą brand.php, kuris atliks užklausą, kuri bus įkelta į pasirinktų prekių ženklų sąrašą:
Taigi, renkantis transporto priemonės tipą, suaktyvinami tam tikri transporto priemonės tipą atitinkantys prekių ženklai.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Pasirinkta vertė $ .get ("http: // localhost / project / autoagency / model .php? markid = "+ ženklas, funkcija (duomenys) {$ (" # modelis "). html (duomenys); // paimu puslapio rezultatą ir įterpiu duomenis į pasirinktą});});}); Norėdami sukurti užklausą, sukuriame failą models.php:
Galiausiai, pasirinkdami modelį, mes pridėsime tą patį scenarijų, kuris parodys mums sąrašą, bet filtruotą pagal pasirinktas parinktis, ir priskirsime rezultatą div id = "list"
„Juqery“ scenarijus, kuris suaktyvina sąrašą iš pasirinkto modelio, bus
$ (function () {$ ("# modelis"). change (function () {model = $ (this) .val () // Pasirinkta vertė $ .get ("http: // localhost / project / autoagency / listing .php? idmodel = "+ modelis, funkcija (duomenys) {$ (" # listing "). html (duomenys); // Aš paimu puslapio rezultatą ir įterpiu duomenis į įrašą div});});}) ; Failas listing.php, kuris atliks filtro užklausą:
| Transporto priemonė | Prekės ženklas | Modelis | Nuotrauka | Veiksmai | |
| Keisti | ||||
Galiausiai, kaip ir veikiant filtrams, trūksta vieno, kad būtų atkurtas pirminis sąrašas ir užregistruota transporto priemonė, kurią pamatysime kitoje pamokoje.
