Innehållsförteckning
Många gånger när vi programmerar sidor med pHp och gör frågor till en databas måste vi uppdatera webbsidan så att php behandlas på servern, konsultera databasen och sedan returnera resultatet.Denna omdirigering av webben tar vanligtvis några sekunder i vissa fall och visar användaren en tom sida medan data bearbetas och visas. För att uppnå ett mer öppet gränssnitt för användaren vid förfrågningar till servern kan vi använda AJAX, som är tekniken som gör att vi kan göra frågor på en webbsida som behöver ett svar från servern utan att ladda om den. Vi börjar ett exempel med en webbinformation för att hantera en fordonsbyrå.
Vi kommer först att skapa databasen i Mysql för att göra detta använd oss Phpmyadmin. Under SQL -kod.
1) Vi skapar databasen
SKAPA DATABASE auto_agency;
2) Sedan skapar vi tabellerna
- a) Tabellstruktur för fordonstabellen
SKAPA TABELL OM DET INTE FINNS `fordon` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` features` text, `mark` varchar (255) DEFAULT NULL,` model` varchar ( 255) DEFAULT NULL, `normal_pris` decimal (10,2) DEFAULT NULL,` beskrivning` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY KEY ( `id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Tabellstruktur för märketabellen
SKAPA TABELL OM DET INTE FÖRESKRIVS `märken` (` 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) Vi sätter in varumärkena
SÄTT IN I `märken` (` id`, `fordonstyp`,` märke`) VÄRDER (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Tabellstruktur för modellbordet
SKAPA TABELL OM DET INTE FINNS `modeller` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL,` brand id` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL , PRIMÄR KEY ('id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Vi sätter in lite data i modelltabellen
INSERT INTO `models '(` id`, `vehicle_type`,` brand id`, `model`) VALUES (1, 1, 1,' ACCORD '), (2, 1, 1,' JAZZ '), (3 , 1,1, 'CIVIC');
- f) Tabellstruktur för tabelltyp_vehiculo
SKAPA TABELL OM DET INTE FINNS `fordonstyp` (` id` int (10) INTE NULL AUTO_INCREMENT, `fordonstyp` varchar (200) DEFAULT NULL, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- g) Vi sätter in vissa data i tabellen type_vehiculo
INSERT INTO `fordonstyp` (` id`, `fordonstyp`) VÄRDEN (1," bilar "), (2," motorcyklar ")
Hittills har vi skapat hela databasen.
1) Anslut till Mysql -databasen genom att skapa filen config.php
Vi kommer att skapa en webbsida som kommer att kallas index.php där vi kommer att ha koden för att visa fordonslistan och sedan filtrera listan med jquery. Layouten vi använder för handledningen är ganska enkel.
Sedan skapar vi den övre panelen:
| Fordon | Varumärken | Modeller |
| Att välja | Att välja | Att välja |
Då kommer listans kod med sql -frågorna, div kommer sedan att visa den filtrerade listan:
| Fordon | varumärke | Modell | Foto | Åtgärder | |
 | Ändra | ||||
Nu när vi har listan som fungerar måste vi skapa filtret med Jquery och programmera funktionaliteten för den valda. Första valet av fordon lägger vi till en fråga och ändrar markeringen enligt följande:
Att välja
Vid körning laddas väljaren med fordonen:
Vi kommer att skapa en fil som heter functions.js för att lagra Jquery -koden och lägga till den på sidan nedanför föregående skript enligt följande:
Det första manuset kommer att vara det som vid val av fordonstyp aktiverar väljaren med märkena
$ (funktion () {$ ("# fordon"). ändra (funktion () {// skriptet aktiveras när jag väljer det valda fordonet = $ (detta) .val () // Jag tar det valda värdet/ /skicka till en sida som gör sql -frågan och returnerar data som ska läggas in i den valda $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + fordon, funktion (data) { $ ("#mark"). html (data); // Jag tar resultatet och sätter in data i markeringen});});}); Vi skapar filen brands.php som är den som kommer att utföra frågan som sedan laddas i Select Brands:
Vid val av fordonstyp aktiveras således de utvalda märkena som motsvarar fordonstypen.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Valt värde $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ märke, funktion (data) {$ (" # modell "). html (data); // Jag tar sidresultatet och sätter in data i välj});});}); Vi skapar modellen.php -filen för att utföra frågan:
Slutligen, när vi väljer modellen, kommer vi att lägga till i samma skript som visar oss listan men filtreras efter de valda alternativen och vi kommer att tilldela resultatet till div id = "list"
Juksskriptet som aktiverar listan från den valda modellen blir
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Valt värde $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ modell, funktion (data) {$ (" # listning "). html (data); // Jag tar sidresultatet och sätter in data i listningsavdelningen});});}); Filen listing.php som kommer att utföra filterfrågan:
| Fordon | varumärke | Modell | Foto | Åtgärder | |
| Ändra | ||||
Slutligen, som i exemplet med filtren som fungerar, skulle en saknas för att återställa listan till originalet och registrera fordonet som vi kommer att se i en annan handledning.
