Inhaltsverzeichnis
Beim Programmieren von Seiten mit pHp und Abfragen an eine Datenbank müssen wir oft die Webseite aktualisieren, damit PHP auf dem Server verarbeitet wird, die Datenbank konsultieren und dann das Ergebnis zurückgeben.Diese Umleitung des Webs dauert normalerweise einige Sekunden und zeigt dem Benutzer in einigen Fällen eine leere Seite, während die Daten verarbeitet und angezeigt werden. Um eine transparentere Schnittstelle für den Benutzer bei Anfragen an den Server zu erreichen, können wir AJAX verwenden. Dies ist die Technologie, die es uns ermöglicht, Anfragen auf einer Webseite zu stellen, die eine Antwort vom Server benötigt, ohne sie neu zu laden. Wir beginnen ein Beispiel mit einer Webliste zur Verwaltung einer Fahrzeugagentur.
Wir erstellen zuerst die Datenbank in Mysql um dies zu tun, verwenden Sie uns Phpmyadmin. Unter dem SQL-Code.
1) Wir erstellen die Datenbank
CREATE DATABASE auto_agency;
2) Dann erstellen wir die Tabellen
- a) Tabellenstruktur für die Fahrzeugtabelle
CREATE TABLE IF NOT EXISTS `vehicles` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` properties` text, `mark` varchar (255) DEFAULT NULL,` model` varchar ( 255) DEFAULT NULL, `normal_price` dezimal (10,2) DEFAULT NULL,` description` 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) Tabellenstruktur für die Markentabelle
CREATE TABLE IF NOT EXISTS `marks` (` 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) Wir fügen die Marken ein
INSERT IN `brands` (` id`, `vehicle_type`,` brand`) WERTE (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Tabellenstruktur für die Modelltabelle
CREATE TABLE IF NOT EXISTS `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 , PRIMARY KEY (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Wir fügen einige Daten in die Modelltabelle ein
INSERT IN `models` (` id`, `vehicle_type`,` brand id`, `model`) VALUES (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, „BÜRGERSCHAFT“);
- f) Tabellenstruktur für Tabelle type_vehiculo
CREATE TABLE IF NOT EXISTS `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) Wir fügen einige Daten in die Tabelle type_vehiculo . ein
INSERT INTO `vehicle_type` (` id`, `vehicle_type`) WERTE (1, 'Autos'), (2, 'Motorräder')
Bisher haben wir die gesamte Datenbank erstellt.
1) Verbinden Sie sich mit der MySQL-Datenbank, indem Sie die Datei config.php erstellen
Wir werden eine Webseite namens index.php erstellen, auf der wir den Code haben, um die Liste der Fahrzeuge anzuzeigen und die Liste dann mit jquery zu filtern. Das Layout, das wir für das Tutorial verwenden, ist ziemlich einfach.
Dann erstellen wir das obere Panel:
| Fahrzeuge | Warenzeichen | Modelle |
| Zur Auswahl | Zur Auswahl | Zur Auswahl |
Dann kommt der Code der Liste mit den SQL-Abfragen, das div dient dann dazu, die gefilterte Liste anzuzeigen:
| Fahrzeug | Marke | Modell | Foto | Aktionen | |
 | Ändern | ||||
Nachdem die Liste nun funktioniert, müssen wir den Filter mit Jquery erstellen und die Funktionalität für die Auswahl programmieren. Bei der ersten Auswahl von Fahrzeug fügen wir eine Abfrage hinzu und ändern die Auswahl wie folgt:
Zur Auswahl
Beim Ausführen wird die Auswahl mit den Fahrzeugen geladen:
Wir erstellen eine Datei namens functions.js zum Speichern des Jquery-Codes und fügen ihn wie folgt der Seite unter dem vorherigen Skript hinzu:
Das erste Skript wird dasjenige sein, das bei der Auswahl eines Fahrzeugtyps die Auswahl mit den Marken aktiviert
$ (function () {$ ("# Vehicle"). change (function () {// das Skript wird aktiviert, wenn ich das ausgewählte Fahrzeug auswähle Fahrzeug = $ (this) .val () // Ich nehme den ausgewählten Wert / / an eine Seite senden, die die SQL-Abfrage durchführt und die Daten zurückgibt, um sie in die Auswahl $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + Vehicle, Function (data) $ ( "#mark"). html (data); // Ich nehme das Ergebnis und füge die Daten in die Select-Marke ein});});}); Wir erstellen die Datei brands.php, die die Abfrage durchführt, die dann in Select Brands geladen wird:
Somit werden beim Auswählen eines Fahrzeugtyps die ausgewählten Marken entsprechend dem Fahrzeugtyp aktiviert.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Ausgewählter Wert $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ mark, function (data) {$ (" # model "). html (data); // Ich nehme das Seitenergebnis und füge die Daten in die Auswahl ein});});}); Wir erstellen die Datei models.php, um die Abfrage durchzuführen:
Schließlich fügen wir bei der Auswahl des Modells dasselbe Skript hinzu, das uns die Liste anzeigt, jedoch nach den ausgewählten Optionen gefiltert, und weisen das Ergebnis der div id = "list" zu.
Das Juqery-Skript, das die Liste des ausgewählten Modells aktiviert, ist
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Ausgewählter Wert $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ model, function (data) {$ (" # Listing "). html (data); // Ich nehme das Seitenergebnis und füge die Daten in das Listing div ein});});}); Die Dateilisting.php, die die Filterabfrage durchführt:
| Fahrzeug | Marke | Modell | Foto | Aktionen | |
| Ändern | ||||
Schließlich würde, wie im Beispiel mit den funktionierenden Filtern, einer fehlen, um die Liste auf das Original zurückzusetzen und das Fahrzeug zu registrieren, das wir in einem anderen Tutorial sehen werden.
