Indholdsfortegnelse
Mange gange, når vi programmerer sider med pHp og stiller forespørgsler til en database, skal vi opdatere websiden, så php behandles på serveren, konsultere databasen og derefter returnere resultatet.Denne omdirigering af internettet tager normalt nogle få sekunder i nogle tilfælde, og viser brugeren en tom side, mens dataene behandles og vises. For at opnå en mere gennemsigtig grænseflade til brugeren, når han anmoder til serveren, kan vi bruge AJAX, som er den teknologi, der giver os mulighed for at stille forespørgsler på en webside, der har brug for et svar fra serveren uden at genindlæse den. Vi starter et eksempel med en webliste for at administrere et køretøjsagentur.
Vi opretter først databasen i Mysql for at gøre dette, brug os Phpmyadmin. Nedenfor SQL -kode.
1) Vi opretter databasen
Opret DATABASE auto_agency;
2) Derefter opretter vi tabellerne
- a) Bordstruktur til køretøjstabellen
Opret tabel, hvis den ikke findes 'køretøjer' ('id' int (10) IKKE NULL AUTO_INCREMENT, 'køretøjstype' int (255) DEFAULT NULL, 'egenskaber' tekst, 'mærke' varchar (255) DEFAULT NULL, 'model' varchar ( 255) DEFAULT NULL, `normal_pris` decimal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY Nøgle ( `id`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Bordstruktur til mærketabellen
Opret tabel, hvis den ikke findes 'mærker' ('id' int (11) IKKE NULL AUTO_INCREMENT, 'køretøjstype' int (10) DEFAULT NULL, 'mark' varchar (200) DEFAULT NULL, PRIMARY Nøgle ('id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) Vi indsætter varemærkerne
INDSÆT I `mærker` (` id`, `køretøjstype`,` mærke`) VÆRDIER (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Bordstruktur til modelbordet
Opret tabel, hvis den ikke findes 'modeller' ('id' int (11) IKKE NULL AUTO_INCREMENT, 'køretøjstype' int (200) DEFAULT NULL, 'brand id' int (200) DEFAULT NULL, 'model' varchar (255) DEFAULT NULL , PRIMÆR NØGLE (`id`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Vi indsætter nogle data i modelbordet
INSERT INTO `models '(` id`, `vehicle_type`,` brand id`, `model`) VÆRDIER (1, 1, 1,' ACCORD '), (2, 1, 1,' JAZZ '), (3 , 1,1, 'CIVIC');
- f) Bordstruktur for bordtype_vehiculo
Opret tabel, hvis den ikke findes 'køretøjstype` (`id` int (10) IKKE NULL AUTO_INCREMENT,` køretøjstype` varchar (200) DEFAULT NULL, PRIMÆR NØGLE (`id`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- g) Vi indsætter nogle data i tabellen type_vehiculo
INSERT INTO `vehicle_type` (` id`, `vehicle_type`) VÆRDIER (1, 'biler'), (2, 'motorcykler')
Indtil videre har vi oprettet hele databasen.
1) Opret forbindelse til Mysql -databasen ved at oprette filen config.php
Vi opretter en webside, der vil blive kaldt index.php, hvor vi vil have koden til at vise listen over køretøjer og derefter filtrere listen med jquery. Det layout, vi bruger til selvstudiet, er ret ligetil.
Derefter opretter vi det øverste panel:
| Køretøjer | Varemærker | Modeller |
| At vælge | At vælge | At vælge |
Derefter kommer koden til listen med sql -forespørgslerne, div vil derefter tjene til at vise den filtrerede liste:
| Køretøj | Mærke | Model | Foto | Handlinger | |
 | Modificere | ||||
Nu hvor vi har listen fungerende, skal vi oprette filteret med Jquery og programmere funktionaliteten, der vedrører markeringen. Det første valg af køretøj tilføjer vi en forespørgsel og ændrer markeringen som følger:
At vælge
Ved udførelse vil select blive indlæst med køretøjerne:
Vi opretter en fil kaldet functions.js for at gemme Jquery -koden og tilføje den til siden under det tidligere script som følger:
Det første script vil være det, der ved valg af en køretøjstype aktiverer markøren med mærkerne
$ (funktion () {$ ("# køretøj"). ændring (funktion () {// scriptet aktiveres, når jeg vælger køretøjets udvalgte køretøj = $ (dette) .val () // Jeg tager den valgte værdi/ /send til en side, der foretager sql -forespørgslen og returnerer dataene, der skal indsættes i den valgte $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + køretøj, funktion (data) { $ ("#mark"). html (data); // Jeg tager resultatet og indsætter dataene i markeringen});});}); Vi opretter filen brands.php, der er den, der skal udføre forespørgslen, der derefter indlæses i Select Brands:
Når du vælger en køretøjstype, aktiveres de udvalgte mærker, der svarer til køretøjstypen, således.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Valgt værdi $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ mærke, funktion (data) {$ (" # model "). html (data); // Jeg tager sideresultatet og indsætter dataene i vælg});});}); Vi opretter modellen.php -filen for at udføre forespørgslen:
Endelig, når vi vælger modellen, tilføjer vi det samme script, der viser os listen, men filtreres efter de valgte muligheder, og vi tildeler resultatet div id = "list"
Juks -scriptet, der aktiverer listen fra den valgte model, vil være
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Valgt værdi $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ model, funktion (data) {$ (" # listing "). html (data); // Jeg tager sideresultatet og indsætter dataene i fortegnelsesdiv});});}); Filen listing.php, der udfører filterforespørgslen:
| Køretøj | Mærke | Model | Foto | Handlinger | |
| Modificere | ||||
Endelig, som eksemplet med filtrene, der mangler, mangler man at gendanne listen til originalen og registrere køretøjet, som vi vil se i en anden vejledning.
