Cuprins
De multe ori, când programăm pagini cu pHp și facem interogări într-o bază de date, trebuie să reîmprospătăm pagina web astfel încât php să fie procesat pe server, să consultăm baza de date și apoi să returnăm rezultatul.Această redirecționare a web-ului durează de obicei câteva secunde, în unele cazuri, arătând utilizatorului o pagină goală în timp ce datele sunt procesate și afișate. Pentru a obține o interfață mai transparentă cu utilizatorul atunci când facem solicitări către server, putem folosi AJAX, care este tehnologia care ne va permite să facem interogări pe o pagină web care are nevoie de un răspuns de la server fără a-l reîncărca. Vom începe un exemplu cu o listare web pentru a gestiona o agenție pentru vehicule.
Mai întâi vom crea baza de date în Mysql pentru a face acest lucru, folosește-ne Phpmyadmin. Sub Cod SQL.
1) Creăm baza de date
CREAȚI BAZA DE DATE auto_agency;
2) Apoi vom crea tabelele
- a) Structura tabelului pentru masa vehiculelor
CREAȚI TABELUL DACĂ NU EXISTĂ „vehicule” („id” int (10) NOT NULL AUTO_INCREMENT, „vehicle_type” int (255) DEFAULT NULL, „caracteristici” text, „marca” varchar (255) DEFAULT NULL, „model” varchar ( 255) DEFAULT NULL, `normal_price` decimal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, CHEIE PRIMARĂ ( `id`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Structura tabelului pentru tabelul notelor
CREAȚI TABELUL DACĂ NU EXISTĂ „mărci” („id” int (11) NOT NULL AUTO_INCREMENT, „vehicle_type” int (10) DEFAULT NULL, „mark` varchar (200) DEFAULT NULL, CHEIE PRIMARĂ („ id ”)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) Introducem mărcile comerciale
INSERAȚI ÎN „mărci” („id”, „vehicul_tip”, „marcă”) VALORI (1, 1, „HONDA”), (3, 1, „AUDI”), (4, 1, „BMW”),
- d) Structura tabelului pentru tabelul modelelor
CREAȚI TABELUL DACĂ NU EXISTĂ „modele” („id” int (11) NOT NULL AUTO_INCREMENT, „vehicle_type” int (200) DEFAULT NULL, „brand id” int (200) DEFAULT NULL, „model” varchar (255) DEFAULT NULL , TASTĂ PRIMARĂ („id”)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Inserăm câteva date în tabelul de modele
INSERAȚI ÎN „modele” („id”, „tip vehicul”, „cod marca”, „model”) VALORI (1, 1, 1, „ACCORD”), (2, 1, 1, „JAZZ”), (3 , 1,1, „CIVIC”);
- f) Structura tabelului pentru tabelul type_vehiculo
CREAȚI TABELUL DACĂ NU EXISTĂ `vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` varchar (200) DEFAULT NULL, CHEIE PRIMARĂ (` id`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- g) Inserăm câteva date în tabelul type_vehiculo
INSERAȚI ÎN „vehicle_type” („id”, „vehicle_type”) VALORI (1, „Mașini”), (2, „Motociclete”)
Până acum am creat întreaga bază de date.
1) Conectați-vă la baza de date Mysql prin crearea fișierului config.php
Vom crea o pagină web care va fi numită index.php unde vom avea codul pentru a afișa lista vehiculelor și apoi vom filtra lista cu jquery. Aspectul pe care îl folosim pentru tutorial este destul de simplu.
Apoi creăm panoul superior:
| Vehicule | Mărci comerciale | Modele |
| A selecta | A selecta | A selecta |
Apoi va veni codul listei cu interogările sql, div va servi apoi pentru a afișa lista filtrată:
| Vehicul | Marca | Model | Fotografie | Acțiuni | |
 | Modifica | ||||
Acum că avem lista de lucru, trebuie să creăm filtrul cu Jquery și să programăm funcționalitatea referitoare la selectare. Prima selectare a vehiculului adăugăm o interogare și modificăm selectarea după cum urmează:
A selecta
La executare, selectarea va fi încărcată cu vehiculele:
Vom crea un fișier numit functions.js pentru a stoca codul Jquery și îl vom adăuga la pagina de sub scriptul anterior, după cum urmează:
Primul script va fi cel care la selectarea unui tip de vehicul activează selectarea cu mărcile
$ (function () {$ ("# vehicle"). change (function () {// scriptul este activat atunci când selectez vehiculul vehicul selectat = $ (this) .val () // iau valoarea selectată / / trimiteți la o pagină care va efectua interogarea SQL și va returna datele pentru a le introduce în selectați $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + vehicul, funcție (date) { $ ("#mark"). html (data); // iau rezultatul și introduc datele în marca de selectare});});}); Creăm fișierul brands.php care va fi cel care va efectua interogarea care va fi apoi încărcată în Selectarea mărcilor:
Astfel, la selectarea unui tip de vehicul, sunt activate mărcile selectate corespunzătoare tipului de vehicul.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Valoare selectată $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ mark, function (data) {$ (" # model "). html (data); // Iau rezultatul paginii și introduc datele în select}};});}); Creăm fișierul models.php pentru a efectua interogarea:
În cele din urmă, la selectarea modelului, vom adăuga în același script care ne arată lista, dar filtrat în funcție de opțiunile selectate și vom atribui rezultatul div id = "list"
Scriptul juqery care activează lista din modelul selectat va fi
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Valoare selectata $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ model, funcție (date) {$ (" # listare "). html (date); // iau rezultatul paginii și inserez datele în div listare});});}); Fișierul listing.php care va efectua interogarea de filtrare:
| Vehicul | Marca | Model | Fotografie | Acțiuni | |
| Modifica | ||||
În sfârșit, așa cum este exemplul cu filtrele care funcționează, ar lipsi unul pentru a restabili lista la original și a înregistra vehiculul pe care îl vom vedea într-un alt tutorial.
