Innholdsfortegnelse
Mange ganger når vi programmerer sider med pHp og gjør spørsmål til en database, må vi oppdatere nettsiden slik at php blir behandlet på serveren, konsultere databasen og deretter returnere resultatet.Denne omdirigering av nettet tar vanligvis noen sekunder i noen tilfeller og viser brukeren en tom side mens dataene behandles og vises. For å oppnå et mer gjennomsiktig grensesnitt for brukeren når han sender forespørsler til serveren, kan vi bruke AJAX, som er teknologien som lar oss stille spørsmål på en webside som trenger svar fra serveren uten å laste den på nytt. Vi starter et eksempel med en weboppføring for å administrere et kjøretøybyrå.
Vi vil først opprette databasen i Mysql for å gjøre dette, bruk oss Phpmyadmin. Under SQL -kode.
1) Vi lager databasen
LAG DATABASE auto_agency;
2) Så lager vi tabellene
- a) Bordstruktur for kjøretøytabellen
OPPRETT TABELL HVIS IKKE FESTER `kjøretøyer` (` id` int (10) IKKE NULL AUTO_INCREMENT, `kjøretøy_type` int (255) DEFAULT NULL,` egenskaper` tekst, `mark` varchar (255) DEFAULT NULL,` modell` varchar ( 255) DEFAULT NULL, `normal_pris` desimal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY NØKKEL ( `id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Bordstruktur for merketabellen
LAG TABELL HVIS IKKE FESTER `merker` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (10) DEFAULT NULL,` mark` varchar (200) DEFAULT NULL, PRIMARY KEY (`id ')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) Vi setter inn varemerker
SETT INN i `merker` (` id`, `kjøretøy_type`,` merke`) VERDIER (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Bordstruktur for modellbordet
LAG TABELL HVIS IKKE FESTER `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 NØKKEL (`id`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Vi setter inn noen data i modellbordet
INSERT INTO `models '(` id`, `vehicle_type`,` brand id`, `model`) VERDI (1, 1, 1,' ACCORD '), (2, 1, 1,' JAZZ '), (3 , 1,1, 'CIVIC');
- f) Bordstruktur for tabell type_vehiculo
OPPRETT TABELL HVIS IKKE FESTER `kjøretøytype` (` id` int (10) IKKE NULL AUTO_INCREMENT, `kjøretøy_type` varchar (200) DEFAULT NULL, PRIMARY KEY (` id`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- g) Vi setter inn noen data i tabellen type_vehiculo
INSERT INTO `vehicle_type` (` id`, `vehicle_type`) VERDIER (1," Cars "), (2," motorsykler ")
Så langt har vi opprettet hele databasen.
1) Koble til Mysql -databasen ved å opprette config.php -filen
Vi vil opprette en webside som vil bli kalt index.php hvor vi vil ha koden for å vise listen over kjøretøyer og deretter filtrere listen med jquery. Oppsettet vi bruker til opplæringen er ganske greit.
Deretter lager vi toppanelet:
| Kjøretøy | Varemerker | Modeller |
| Å velge | Å velge | Å velge |
Deretter kommer koden til listen med sql -spørringene, div vil deretter tjene til å vise den filtrerte listen:
| Kjøretøy | Merke | Modell | Bilde | Handlinger | |
 | Endre | ||||
Nå som vi har listen som fungerer, må vi lage filteret med Jquery og programmere funksjonaliteten knyttet til det valgte. Det første valget av kjøretøy legger vi til en forespørsel og endrer utvalget som følger:
Å velge
Når du utfører, vil select bli lastet med kjøretøyene:
Vi vil opprette en fil som heter functions.js for å lagre Jquery -koden og legge den til siden under det forrige skriptet som følger:
Det første skriptet vil være det som ved valg av kjøretøytype aktiverer utvalgte med merkene
$ (funksjon () {$ ("# kjøretøy"). endring (funksjon () {// skriptet aktiveres når jeg velger kjøretøyet som er valgt = $ (dette) .val () // Jeg tar den valgte verdien/ /send til en side som vil utføre sql -spørringen og returnere dataene som skal legges inn i den valgte $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + kjøretøy, funksjon (data) { $ ("#mark"). html (data); // Jeg tar resultatet og setter inn dataene i markeringen});});}); Vi lager filen brands.php som er den som skal utføre spørringen som deretter vil bli lastet inn i Select Merker:
Når du velger en kjøretøytype, aktiveres de utvalgte merkene som tilsvarer kjøretøytypen.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Valgte verdi $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ merke, funksjon (data) {$ (" # modell "). html (data); // Jeg tar sideresultatet og setter inn dataene i select});});}); Vi lager modellen.php -filen for å utføre spørringen:
Til slutt, når vi velger modellen, vil vi legge til i det samme skriptet som viser oss listen, men filtrert i henhold til de valgte alternativene, og vi vil tildele resultatet til div id = "list"
Jukseskriptet som aktiverer listen fra den valgte modellen vil være
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Valgte verdi $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ modell, funksjon (data) {$ (" # listing "). html (data); // Jeg tar sideresultatet og setter inn dataene i oppføringsdiv});});}); Fillisten.php som skal utføre filterforespørselen:
| Kjøretøy | Merke | Modell | Bilde | Handlinger | |
| Endre | ||||
Til slutt, som eksemplet med filtrene som fungerer, vil man mangle å gjenopprette listen til originalen og registrere kjøretøyet som vi vil se i en annen opplæring.
