Satura rādītājs
Daudzas reizes, programmējot lapas ar pHp un veicot vaicājumus datu bāzē, mums ir jāatjaunina tīmekļa lapa, lai php tiktu apstrādāts serverī, apskatiet datu bāzi un pēc tam atgrieziet rezultātu.Šī tīmekļa novirzīšana parasti prasa dažas sekundes, dažos gadījumos, kad dati tiek apstrādāti un parādīti, lietotājam tiek parādīta tukša lapa. Lai panāktu pārskatāmāku lietotāja saskarni, veicot pieprasījumus serverim, mēs varam izmantot AJAX, kas ir tehnoloģija, kas ļaus mums veikt vaicājumus tīmekļa lapā, kurai nepieciešama servera atbilde, to atkārtoti neielādējot. Mēs sāksim piemēru ar tīmekļa sarakstu, lai pārvaldītu transportlīdzekļu aģentūru.
Vispirms mēs izveidosim datu bāzi Myql lai to izdarītu, izmantojiet mūs Phpmyadmin. Zemāk SQL kods.
1) Mēs izveidojam datu bāzi
CREATE DATABASE auto_agency;
2) Tad mēs izveidosim tabulas
- a) Transportlīdzekļu tabulas uzbūve
IZVEIDOT TABULU, JA NAV PASTĀV "transportlīdzekļi" ("id" int (10) NOT NULL AUTO_INCREMENT, "vehicle_type" int (255) DEFAULT NULL, "raksturojums" teksts, "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`)) DZINĒJS = MyISAM DEFAULT CHARSET = latīņu1 AUTO_INCREMENT = 1;
- b) Tabulu struktūra atzīmju tabulai
IZVEIDOT TABULU, JA NEPASTĀV "atzīmes" ("id" int (11) NOT NULL AUTO_INCREMENT, "vehicle_type" int (10) DEFAULT NULL, "mark" varchar (200) DEFAULT NULL, PRIMARY KEY ("id")) DZINĒJS = MyISAM DEFAULT CHARSET = latīņu1 AUTO_INCREMENT = 1;
- c) Mēs ievietojam preču zīmes
INSERT INTO "zīmoli" ("id", "vehicle_type", "brand") VĒRTĪBAS (1, 1, "HONDA"), (3, 1, "AUDI"), (4, 1, "BMW"),
- d) Tabulu struktūra modeļu tabulai
IZVEIDOT TABULU, JA NEPASTĀV "modeļi" ("id" int (11) NOT NULL AUTO_INCREMENT, "vehicle_type" int (200) DEFAULT NULL, "mark id" int (200) DEFAULT NULL, "model" varchar (255) DEFAULT NULL , PRIMARY KEY ("id")) DZINĒJS = MyISAM DEFAULT CHARSET = latīņu1 AUTO_INCREMENT = 1;
- e) Mēs ievietojam dažus datus modeļu tabulā
INSERT INTO "modeļi" ("id", "vehicle_type", "brand id", "model") VALUES (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, “CIVIC”);
- f) Tabulas struktūra tabulas tipam_vehiculo
IZVEIDOT TABULU, JA NAV PASTĀV "transportlīdzekļa_tips" ("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) Mēs ievietojam dažus datus tabulā type_vehiculo
INSERT INTO "vehicle_type" ("id", "vehicle_type") VĒRTĪBAS (1, "Cars"), (2, "Motocikli") Līdz šim esam izveidojuši visu datu bāzi.
1) Izveidojiet savienojumu ar Mysql datu bāzi, izveidojot failu config.php
Mēs izveidosim tīmekļa lapu ar nosaukumu index.php, kur mums būs kods, lai parādītu transportlīdzekļu sarakstu, un pēc tam filtrēsim sarakstu ar jquery. Izkārtojums, ko izmantojam apmācībai, ir diezgan vienkāršs.
Tad mēs izveidojam augšējo paneli:
| Transportlīdzekļi | Preču zīmes | Modeļi |
| Lai izvēlētos | Lai izvēlētos | Lai izvēlētos |
Pēc tam parādīsies saraksta kods ar sql vaicājumiem, pēc tam div kalpos, lai parādītu filtrēto sarakstu:
| Transportlīdzeklis | Zīmols | Modelis | Foto | Darbības | |
 | Modificēt | ||||
Tagad, kad saraksts darbojas, mums ir jāizveido filtrs ar Jquery un jāprogrammē funkcionalitāte, kas saistīta ar izvēli. Pirmajā transportlīdzekļa atlasē mēs pievienojam vaicājumu un modificējam izvēli šādi:
Lai izvēlētos
Izpildes laikā atlasītais tiks ielādēts ar transportlīdzekļiem:
Mēs izveidosim failu ar nosaukumu function.js, lai saglabātu Jquery kodu un pievienotu to lapai zem iepriekšējā skripta šādi:
Pirmais skripts būs tas, kas, izvēloties transportlīdzekļa tipu, aktivizē izvēli ar zīmoliem
$ (function () {$ ("# vehicle"). change (function () {// skripts tiek aktivizēts, kad izvēlos atlasīto transportlīdzekļa transportlīdzekli = $ (this) .val () // Es ņemu izvēlēto vērtību/ /nosūtīt uz lapu, kas veiks sql vaicājumu un atdos datus, kas jāievieto atlasītajā $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + transportlīdzeklis, funkcija (dati) { $ ("#mark"). html (dati); // Es ņemu rezultātu un ievietoju datus atlases atzīmē});});}); Mēs izveidojam failu Brands.php, kas veiks vaicājumu, kas pēc tam tiks ielādēts atlasītajos zīmolos:
Tādējādi, izvēloties transportlīdzekļa tipu, tiek aktivizēti izvēlētie zīmoli, kas atbilst transportlīdzekļa tipam.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Atlasītā vērtība $ .get ("http: // localhost / project / autoagency / model .php? markid = "+ atzīme, funkcija (dati) {$ (" # model "). html (dati); // Es paņemu lapas rezultātu un ievietoju datus atlasē});});}); Mēs izveidojam failu models.php, lai veiktu vaicājumu:
Visbeidzot, izvēloties modeli, mēs pievienosim to pašu skriptu, kas parāda mums sarakstu, bet tiek filtrēts atbilstoši atlasītajām opcijām, un rezultātu piešķirsim div id = "list"
Būs juqery skripts, kas aktivizē sarakstu no atlasītā modeļa
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Atlasītā vērtība $ .get ("http: // localhost / project / autoagency / listing .php? idmodel = "+ modelis, funkcija (dati) {$ (" # listing "). html (dati); // Es ņemu lapas rezultātu un ievietoju datus saraksta div});});}) ; Fails listing.php, kas veiks filtra vaicājumu:
| Transportlīdzeklis | Zīmols | Modelis | Foto | Darbības | |
| Modificēt | ||||
Visbeidzot, tāpat kā piemērs, kad filtri darbojas, trūkst, lai atjaunotu sākotnējo sarakstu un reģistrētu transportlīdzekli, ko redzēsim citā apmācībā.
