Spisie treści
Wielokrotnie programując strony z pHp i wykonując zapytania do bazy danych musimy odświeżyć stronę tak, aby php było przetwarzane na serwerze, skonsultować się z bazą danych, a następnie zwrócić wynik.To przekierowanie sieci zwykle trwa kilka sekund w niektórych przypadkach, pokazując użytkownikowi pustą stronę podczas przetwarzania i wyświetlania danych. Aby uzyskać bardziej przejrzysty interfejs dla użytkownika podczas wysyłania żądań do serwera, możemy wykorzystać AJAX, czyli technologię, która pozwoli nam na wykonywanie zapytań na stronie internetowej wymagającej odpowiedzi z serwera bez jej przeładowywania. Przykład zaczniemy od wpisu internetowego do zarządzania agencją samochodową.
Bazę danych utworzymy najpierw w Mysql aby to zrobić, użyj nas phpmyadmin. Poniżej Kod SQL.
1) Tworzymy bazę danych
UTWÓRZ BAZĘ DANYCH auto_agency;
2) Następnie stworzymy tabele
- a) Struktura stołu dla stołu pojazdów
CREATE TABLE IF NOT EXISTS `pojazdy` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` charakterystyka` text, `mark` varchar (255) DEFAULT NULL,` model` varchar ( 255) DEFAULT NULL, `normal_price` dziesiętny (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY KEY ( `id`)) ENGINE = MyISAM DOMYŚLNY ZESTAW ZNAKÓW = latin1 AUTO_INCREMENT = 1;
- b) Struktura tabeli dla tabeli znaków
UTWÓRZ TABELĘ, JEŚLI NIE ISTNIEJE `marks` (`id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (10) DEFAULT NULL,` mark` varchar (200) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE = MyISAM DOMYŚLNY ZESTAW ZNAKÓW = latin1 AUTO_INCREMENT = 1;
- c) Wstawiamy znaki towarowe
WSTAWIĆ W „Marki” („ id”, „typ_pojazdu”, „marka”) WARTOŚCI (1, 1, „HONDA”), (3, 1, „AUDI”), (4, 1, „BMW”),
- d) Struktura tabeli dla tabeli modeli
UTWÓRZ TABELĘ, JEŚLI NIE ISTNIEJE `models` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL,` brand id` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL , KLUCZ PODSTAWOWY (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Wstawiamy dane w tabeli modeli
WSTAWIĆ W „modele” (`id`, `vehicle_type`,` brand id`, `model`) WARTOŚCI (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, „CIVIC”);
- f) Struktura tabeli dla tabeli type_vehiculo
UTWÓRZ TABELĘ, JEŚLI NIE ISTNIEJE `vehicle_type` (`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) Wstawiamy dane do tabeli type_vehiculo
WSTAW W „Vehicle_type” („id”, „vehicle_type”) WARTOŚCI (1, „Samochody”), (2, „Motocykle”)
Do tej pory stworzyliśmy całą bazę danych.
1) Połącz się z bazą danych Mysql, tworząc plik config.php
Stworzymy stronę internetową, która będzie nazywała się index.php, gdzie będziemy mieli kod do wyświetlenia listy pojazdów, a następnie przefiltrowania listy za pomocą jquery. Układ, którego używamy w samouczku, jest dość prosty.
Następnie tworzymy górny panel:
| Pojazdy | Znaki towarowe | Modele |
| Wybrać | Wybrać | Wybrać |
Następnie pojawi się kod listy z zapytaniami sql, div będzie wtedy służył do pokazania przefiltrowanej listy:
| Pojazd | Marka | Model | Zdjęcie | działania | |
 | Modyfikować | ||||
Teraz, gdy lista już działa, musimy utworzyć filtr za pomocą Jquery i zaprogramować funkcjonalność związaną z zaznaczeniem. Przy pierwszym wyborze Pojazdu dodajemy zapytanie i modyfikujemy wybór w następujący sposób:
Wybrać
Podczas wykonywania wybór zostanie załadowany pojazdami:
Stworzymy plik o nazwie functions.js do przechowywania kodu Jquery i dodamy go do strony poniżej poprzedniego skryptu w następujący sposób:
Pierwszym skryptem będzie ten, który po wybraniu typu pojazdu aktywuje wybór z markami
$ (function () {$ ("# pojazd").change (function() {// skrypt aktywuje się po wybraniu pojazdu pojazd = $ (ten) .val() // biorę wybraną wartość / / wyślij na stronę, która wykona zapytanie sql i zwróci dane do umieszczenia w wybranym $ .get ("http://localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + pojazd, funkcja (dane) { $ ( "#mark"). html (data); // biorę wynik i wstawiam dane w select mark});});}); Tworzymy plik brands.php, który będzie tym, który zrealizuje zapytanie, które następnie zostanie załadowane do Select Brands:
W ten sposób podczas wybierania typu pojazdu aktywowane są wybrane marki odpowiadające typowi pojazdu.
$ (function () {$ ("# marka"). change (function () {brand = $ (this) .val () // Wybrana wartość $ .get ("http: // localhost / projekty / autoagencja / model .php?markd = "+ mark, function(data) {$("#model").html(data);// biorę wynik strony i wstawiam dane w select});});}); Tworzymy plik models.php do wykonania zapytania:
Na koniec przy wyborze modelu dodamy w tym samym skrypcie, który pokazuje nam listę, ale przefiltrowaną według wybranych opcji i przypiszemy wynik do div id = "lista"
Skrypt juqery, który aktywuje listę z wybranego modelu, będzie
$ (function () {$ ("# model").change (function () {model = $ (this) .val () // Wybrana wartość $ .get ("http://localhost/projekty/autoagencja/lista .php? idmodel = "+ model, function (data) {$ (" # listing ").html (data); // biorę wynik strony i wstawiam dane do listingu div});});}); Plik listing.php, który wykona zapytanie filtrujące:
| Pojazd | Marka | Model | Zdjęcie | działania | |
| Modyfikować | ||||
Na koniec, tak jak w przykładzie z działającymi filtrami, zabrakłoby jednego, aby przywrócić listę do oryginału i zarejestrować pojazd, który zobaczymy w innym samouczku.
