JQuery este o bibliotecă javascript al cărei scop este „scrie mai puțin, face mai mult”. jQuery este ușor de conectat la site-ul dvs. și de a începe să utilizați. Cu jQuery, devine mult mai ușor să utilizați javascript pe site-ul dvs.
jQuery elimină o grămadă de linii de cod javascript și vă permite să implementați acea grămadă de linii cu o singură metodă.
Ce este AJAX?
AJAX este asincron (adică browserul, după ce a trimis o cerere, poate face orice, de exemplu, afișează un mesaj despre așteptarea unui răspuns, derulează pagina etc.) JavaScript și XML. Este folosit pentru a crea pagini web dinamice și rapide. AJAX ne permite să actualizăm o parte a unei pagini web fără a reîncărca întreaga pagină.
Dar jQuery și AJAX?
Combinația dintre jQuery și AJAX oferă funcționalități puternice. CU folosind jqueryși ajax puteți face o cerere și puteți primi informații într-o varietate de formate, inclusiv XML, HTML și chiar text simplu. Puteți utiliza formatul JSON pentru a face schimb de date. Putem folosi datele primite de la solicitarea ajax în pagina noastră html.
jQuery face ca API-ul Ajax bazat pe browser existent să fie mai puternic și mai ușor de utilizat. Efectuarea apelurilor ajax în mod obișnuit folosind javascript este un pic dificil: deoarece trebuie să țineți cont de faptul că diferite browsere necesită abordări diferite pentru crearea obiectului XMLHttpRequest. De asemenea, trimiterea datelor din, de exemplu, formulare devine mai dificilă dacă utilizați javascript obișnuit pentru apelul ajax.
jQuery oferă funcționalități simple și puternice care extind metodele javaascript AJAX și oferă o abordare mai flexibilă.
În acest scurt articol, vă voi arăta cum se utilizează jQuery și AJAX în php simplu formă... Să începem ... Pentru a utiliza jQuery și AJAX avem nevoie de două fișiere, primul fișier va conține codul html / php, prin care se va face cererea ajax. În al doilea fișier, vom gestiona cererea ajax și vom returna rezultatul pe prima pagină.
Pasul 1. Creați un fișier school.php și lipiți următorul cod în el:
În codul de mai sus, obținem numele și numărul elevului și, folosind jquery și ajax, le trimitem la details.php.
| Numele dumneavoastră: | ||
| Numărul ruloului: | ||
Pasul 2: Creați details.php și introduceți următorul cod în el:
În codul de mai sus, obținem adresa elevului folosind numărul secvențial și numele acestuia.
Pentru acest exemplu, va trebui să creați o bază de date școlară și un tabel pentru studenți. Tabelul studentului conține câmpuri cu nume, număr de ordine și adresă.
Sper că veți găsi acest articol de ajutor.
Metoda post () este de obicei destinată trimiterii de date către server (de exemplu dintr-un formular).
În contextul metodei post, merită menționat json este un format de text bazat pe javascript. Poate fi folosit de aproape orice limbaj de programare.
jQuery, cerere POST Ajax
jQuery.post (url ,,,)- Primul argument (url) este adresa URL a documentului către care este trimisă cererea;
- Al doilea argument (date) este datele trimise către server, reprezentate de obicei ca un obiect js;
- Al treilea argument (callback (date, textStatus, jqXHR)) este o funcție apelată după ce serverul răspunde. Ca argumente această funcție acceptă datele trimise de server ca răspuns la cerere și starea modului în care cererea a fost finalizată.
json_decode () și json_encode ()
ÎN Limbaj PHP(de la 5.2), suportul JSON este inclus în nucleu sub forma funcțiilor json_decode () (decodează un șir JSON) și json_encode (), care convertesc ele însele tipurile de date JSON în adecvate Tipuri PHP si invers.
1, "b" => 2); echo json_encode ($ arr); ?>Rezultat
("a": 1, "b": 2, "c": 3, "d": 4, "e": 5)Exemplu PHP al funcției json_decode
$ json = "(" a ": 1," b ": 2)"; var_dump (json_decode ($ json, adevărat)); $ arr = json_decode ($ json, adevărat); ecou "". $ arr [" a "]."
". $ arr [" b "]."
";
Rezultat
matrice (5) (["a"] => int (1) ["b"] => int (2)) 1 2Un exemplu de funcționare a unei cereri Ajax folosind metoda POST
Ce facem:
Verificăm corectitudinea datelor trimise (POST-request AJAX) (datele sunt introduse de utilizator). Dacă datele sunt corecte, afișăm un mesaj. În caz contrar, facem o evidențiere roșie lângă câmpuri. Totul funcționează asincron, adică fără a reîncărca pagina. poți să folosești acest principiu, de exemplu, pentru a crea un sistem de comentarii cu inserarea comentariilor într-o bază de date.
jQuery
$ (document). ready (function () (var working = false; / * Acest semnal împiedică trimiterea mai multor comentarii: * / $ („formular”). submit (function (e) (e.preventDefault (); dacă (working) return false; working = true; $ ("# submit"). val ("Wait .."); $ (". error"). removeClass ("error"); $ .post ("submit.php ", $ (this) .serialize (), function (msg) (/ * Trimiterea valorilor formularului către submit.php: * / working = false; $ (" # submit "). val (" Submit "); if (msg.status) // Dacă datele sunt corecte, adăugați un mesaj (console.log (msg.status); $ (msg.html) .hide (). InsertBefore ("formular"). SlideDown ();) else (// Dacă există erori, parcurgeți obiectul // msg.errors și afișați-le pe pagina $ .each (msg.errors, funcție (k, v) ($ ("#" + k) .addClass (" eroare "); // alert (k);));))," json ");));));HTML
PHP
// accepta datele primite prin ajax $ arr = $ _POST; $ arr = $ _POST; if (filter_var ($ arr, FILTER_VALIDATE_EMAIL) && filter_var ($ arr, FILTER_VALIDATE_INT)) (echo json_encode (array ("status" => 1, "html" => "În acest articol, exemplele de cod pe care le folosesc pentru a le trimite solicitări ajax către server prin jQuery... Sarcinile lor pot fi diferite, astfel încât să puteți utiliza diferite funcții pentru ele, care simplifică scrierea codului.
Interogați date html utilizând funcția Încărcare
Aceasta este cea mai simplă solicitare ajax prin jQuery, preluând date html și inserându-le într-un element dom cu id = "rezultat" (conținutul elementului este înlocuit):
$ („# rezultat”). load („
Un caz de utilizare mai avansat pentru încărcare:
$ („# rezultat”). load („
În acest exemplu, parametrii sunt, de asemenea, transferați la server și, după primirea răspunsului, se verifică dacă a existat o eroare (de exemplu, un răspuns de la server nu a fost primit) și efectuarea diferitelor acțiuni.
Cereri Ajax cu funcții GET și POST
Aceste funcții trimit o cerere ajax cu metodele get și post http. Iată câteva exemple de utilizare a acestora.
$ .get („
Transferul de date este opțional, precum și efectuarea oricăror acțiuni după primirea unui răspuns de la server, adică în acest caz, liniile 3 și 4-6 pot fi șterse dacă este necesar și astfel scurtează și mai mult codul.
Tipul de date primite de la server poate fi specificat prin adăugarea dataType (vezi mai jos) - în mod implicit este determinat automat.
Utilizarea postului este similară, dar în exemplul următor folosesc un apel funcțional după ce am primit un răspuns de la server.
$ .post („
De fapt, funcțiile get și post sunt versiuni abreviate ale funcției ajax, despre care voi discuta mai jos.
Obținerea datelor json folosind getJSON
getJSON este o versiune scurtată a cererii ajax folosind metoda GET și primind date sub formă de json. Metoda este convenabilă, de exemplu, pentru a obține un fel de matrice cu date și apoi pentru a lucra cu ea.
$ .getJSON (" Pe partea de server, programul formează o matrice și îl convertește într-un șir json, de exemplu, astfel: $ arr = array (); $ arr = array ("id" => 10, "text" => "linia de test 1"); $ arr = array ("id" => 20, "text" => "linia de test 2"); $ arr = array ("id" => 30, "text" => "linia de test 3"); echo json_encode ($ arr); În același mod, puteți transfera obiecte stdClass de pe server convertindu-le într-un șir json. Acum voi da un exemplu de cerere simplă de obținere cu funcția ajax și obținerea datelor html. $ .ajax ((url: " Solicitarea către server se face prin metoda get, deoarece parametrul responsabil pentru tipul de cerere, tip implicit este egal cu GET. Un exemplu de a face o cerere prin funcția ajax cu transferul de date prin metoda post și gestionarea evenimentelor. Voi descrie mai jos Opțiuni suplimentare, care sunt cel mai des folosite. $ .ajax ((url: " Butonul Trimite date:
În exemplul dat, când butonul este apăsat, starea butonului se schimbă mai întâi (textul de pe acesta se schimbă în „Trimitere ...” și devine inactiv), ceea ce se face folosind parametrul beforeSend. Apoi, cererea este trimisă cu transferul datelor necesare. După primirea unui răspuns de la server, starea butonului revine la starea sa anterioară (textul se schimbă în „Trimite”, devine activ). Răspunsul este primit ca date JSON. Voi descrie pe scurt parametrii pentru trimiterea unei cereri ajax, care de cele mai multe ori pot fi utile: Mai jos sunt câteva exemple de utilizare a cererilor ajax. Exemplu de cod formular html:
Cerere simplă ajax prin jQuery cu funcția AJAX
Exemplu mai complex de cerere ajax prin jQuery
url
Adresa de trimitere a cererii Ajax
tip
Metoda de trimitere Solicitați GET sau POST
date
Date trimise către server. Poate fi un șir cu parametri și valorile acestora în format par1 = val1 & par2 = val2 & ..., un obiect jQuery, de exemplu, $ („input”) sau alte date.
dataType
Tipul de date primite de la server. Poate fi html, json, text, script și XML.
cache
Memorarea în cache a cererii din browser (fals - nu cache).
asincron
Executarea asincronă a cererii, adică programul continuă să se execute fără să aștepte răspunsul serverului. Dacă specificați false, atunci cererea va fi executată sincron, iar pagina nu va răspunde la nimic până când nu va fi primit un răspuns de la server.
prelucrarea datelor
Conversia datelor trimise în format URL. Dacă doriți ca datele să nu fie convertite, setați la false. De exemplu, atunci când trimiteți o imagine către un server sau date XML.
tipul de conținut
Tipul de date transferate, implicit "application / x-www-form-urlencoded; charset = UTF-8". Dacă specificați false, atunci tipul nu va fi trecut în antet, ceea ce poate fi necesar, de exemplu, atunci când trimiteți o imagine către server.
înainte de Trimitere
O funcție de executat înainte de a trimite cererea ajax.
complet
O funcție de executat după primirea unui răspuns de la server (fie reușită, fie nu).
succes
O funcție de executat atunci când solicitarea reușește.
eroare
O funcție de executat în caz de eroare.
Trimiterea unui formular cu toate datele cererii ajax prin jQuery
Cod JavaScript:
$ ("# myform"). submit (function (e) (e.preventDefault (); $ .ajax ((type: $ (this) .attr ("method"), url: "
Pentru a preveni reîncărcarea paginii atunci când faceți clic pe butonul „trimiteți”, anulați mai întâi acțiunile standard ale browserului folosind e.preventDefaults () .
În parametrul de date, trecem toate câmpurile formularului folosind $ (this) .serialize ()- această funcție convertește toate intrările și selecțiile într-un șir adecvat pentru trimiterea către server.
De asemenea, parametrul este utilizat aici asincron: fals astfel încât, până când formularul nu este trimis la server, nu se poate face clic sau face nimic altceva.
Trimiterea unei imagini sau fișiere prin cerere ajax prin jQuery
Sarcina de a trimite un fișier sau o imagine către server fără a reîncărca pagina apare destul de des. În acest exemplu, voi analiza 2 jetoane simultan: selectarea fișierului apăsând butonul, care poate fi încadrat după cum doriți și afișarea progresului la transferul unui fișier către server cu o cerere ajax.
codul html va fi astfel:
#addfile (poziție: relativă; depășire: ascuns; lățime: 180px; înălțime: 34px;) #load_file (poziție: absolut; sus: 0; stânga: 0; lățime: 180px; înălțime: 34px; dimensiunea fontului: 0px; opacitate : 0; filtru: alfa (opacitate: 0);) #load_file: hover (cursor: pointer;)
Ideea este că o intrare standard este afișată deasupra butonului pentru a selecta un fișier, dar este complet transparentă și are aceleași dimensiuni ca butonul. Astfel, utilizatorul vede butonul, dar când se deplasează deasupra acestuia, se deplasează de fapt deasupra intrării. În consecință, atunci când face clic pe buton, intrarea de selecție a fișierului este de fapt apăsată. Pentru a nu clipi cursorul după selectarea unui fișier, dimensiunea fontului este setată la 0 px.
Acum, codul javascript pentru trimiterea unui fișier la server care arată progresul:
$ (function () ($ ("# load_file"). on ("change", loadfile);)); function loadfile () ($ ("# addfile span"). html ("0% incarcat"); files = $ ("# load_file"). files; var form = new FormData (); form.append ("upload" , fișiere); $ .ajax ((url: "
Când încărcați un fișier pe server, butonul va afișa câte% a fost deja transferat pe server. După finalizarea descărcării, numele butonului este returnat așa cum a fost, iar valoarea intrării fișierului este setată la gol, astfel încât să puteți selecta din nou un fișier nou.
Un exemplu de partea serverului în php (la cererea lui Eugene):
$ mesaj = ""; if (gol ($ _ FILES ["upload"] ["name"]) || $ _FILES ["upload"] == "none") ($ message = "Nu ați selectat un fișier";) else if ($ _FILES ["upload"] ["size"] == 0 || $ _FILES ["upload"] ["size"]> 9437184) ($ message = "Dimensiunea fișierului nu respectă normele (maxim 9 MB) ";) else if (($ _FILES [" upload "] [" type "]! =" Image / jpeg ") && ($ _FILES [" upload "] [" type "]! =" Image / pjpeg " ) && ($ _FILES ["upload"] ["type"]! = "Image / gif") && ($ _FILES ["upload"] ["type"]! = "Image / png")) ($ message = „Numai imaginile JPG, GIF pot fi încărcate și PNG.”;) Else if (! Is_uploaded_file ($ _ FILES ["upload"] ["tmp_name"])) ($ message = "Ceva nu a mers bine. Încercați să încărcați fișierul din nou. ";) else ($ ftype = $ _FILES [" upload "] [" type "]; $ fname =" newname_image. ". ($ ftype ==" image / gif "?" gif ": ($ ftype = = "image / png"? "png": "jpg")); if (move_uploaded_file ($ _ FILES ["upload"] ["tmp_name"], $ _SERVER ["DOCUMENT_ROOT"]. "/ files /".$ fname)) ($ message = "Imagine încărcată cu succes.";) else ($ message = "Ceva nu a mers bine La. Încercați să încărcați din nou fișierul. ";)) Exit (mesaj $);
Informațiile despre imaginea încărcată vor fi conținute în $ _FILES ["upload"], deoarece fișierul a fost adăugat de script astfel: form.append („încărcare”, fișiere); În consecință, tot ce este necesar din programul php este să verificați dacă fișierul corespunde parametrilor așteptați, să transferați fișierul către dosarul dorit(în exemplu, în folderul fișiere) sub numele dorit (în exemplu, newname_image) și returnează un răspuns browserului, care în exemplul meu este pur și simplu afișat utilizatorului prin comanda de alertă (mesaj);
Există o mulțime de situații în care este posibilă și chiar necesară utilizarea cererilor ajax, iar toate acestea nu pot fi analizate aici. Cu toate acestea, dacă aveți sugestii, ce alte exemple are sens să adăugați aici, scrieți în comentarii.
Nu pot trimite în nici un fel cea mai simplă cerere la servlet folosind jQuery. Dar, în același timp, dacă trimit formularul, atunci totul funcționează cu o explozie. Mai jos este index.html din care vreau să trimit numele de utilizator. login.js, în care formez solicitarea în sine, SerletStore.java servletul în sine. Și structura întregului proiect.
login.js Singura adresă URL mai mult sau mai puțin de lucru = "http: // localhost: 8080 / testservlet / post", iar ei "/ testservlet / post", "testservlet / post", "/ post," "post" provoacă o eroare 404.
Funcția addNewVoting () (var xhr = new XMLHttpRequest (); var body = "name =" + encodeURIComponent ("name") + "& surname =" + encodeURIComponent ("surname"); xhr.open ("POST", " http: // localhost: 8080 / testservlet / post ", true) xhr.setRequestHeader (" Content-Type "," application / x-www-form-urlencoded ") xhr.send (body);); funcție addNewVoting1 () (var user = ("firstName": "vlad") var JSONString = JSON.stringify (user); var url = "http: // localhost: 8080 / testservlet / post"; $ .ajax ((url : url, metodă: "post", date: JSONString, contentType: "application / json", eroare: funcție (mesaj) (var JSONObject = JSON.parse (mesaj); console.log (JSONObject);), succes: funcție (date) (var JSONObject = JSON.parse (data); console.log (JSONObject);), headers: ("Accept": "application / json", "Accept-Language": "en", "Cache-Control ":" vârsta maximă = 3600 ")));););
Când se apelează cea de-a doua funcție, aceasta afișează:
index.html
ServletStore.java
Importați javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet (name = "post", urlPatterns = "/ post") clasa publică Servlet extinde HttpServlet (@Override protected void doGet (HttpServletRequest req, HttpServletResponse resp) aruncă ServletException, IOException (PrintWriter writer = print ("Hello")) @Override protejat void doPost (HttpServletRequest req, HttpServletResponse resp) aruncă ServletException, IOException (super.doPost (req, resp);))
Structura proiectului.
O lecție în care vom folosi exemple pentru a crea cereri AJAX simple asincrone către server. Vom folosi atât metoda GET, cât și metoda POST ca metodă de transmitere a cererilor. Pe server, vom procesa solicitările folosind scripturi PHP.
Ce este o cerere AJAX asincronă?
Tehnologia AJAX este utilizată în principal pentru a face cereri asincrone către server. O cerere asincronă este una care rulează în fundal și nu împiedică utilizatorul să interacționeze cu pagina.
La trimiterea unei cereri asincrone, browserul (pagina) nu este „înghețat”, adică cu ea, ca și până acum, poți lucra. Dar atunci de unde știi când va veni un răspuns de la server. Pentru a determina acest lucru, trebuie să monitorizați proprietatea readyState a browserului. Această proprietate conține un număr, a cărui valoare puteți judeca în ce etapă este solicitarea. Tabelul următor rezumă valorile de bază ale proprietății readyState și stările corespunzătoare ale acestora.
Acestea. se pare că trebuie să urmărim când valoarea proprietății readyState este 4. Aceasta va însemna că a venit un răspuns de la server la cererea trimisă. Restul valorilor sunt rareori folosite în practică și este posibil ca unele browsere să nu le accepte.
Pentru a determina în ce etapă este solicitarea, trebuie să utilizați evenimentul onreadystatechange al obiectului XMLHttpRequest. Acest eveniment apare ori de câte ori se modifică valoarea proprietății readyState. Prin urmare, în gestionarul acestui eveniment (al unei funcții nenumite sau denumite), puteți scrie acțiuni care vor verifica dacă această proprietate este egală cu 4 și dacă este, atunci, de exemplu, afișați răspunsul serverului pe pagină.
Efectuarea unei cereri AJAX asincrone (metoda GET)
Să luăm în considerare crearea unei cereri AJAX asincrone folosind un exemplu care îl va saluta pe utilizator și îi va afișa adresa IP după încărcarea paginii.
Pentru a face acest lucru, trebuie să creați 2 fișiere pe server într-un singur director:
- welcome.html - pagină HTML care va fi afișată utilizatorului. În aceeași pagină, vom plasa un script care va efectua toate acțiunile necesare pentru ca AJAX să funcționeze pe partea clientului.
- processing.php - fișier PHP care va procesa cererea de pe partea serverului și va forma răspunsul. Să începem dezvoltarea prin crearea structurii de bază a fișierului welcome.html.
Un exemplu de lucru AJAX
Să ne uităm la secvența de acțiuni care trebuie efectuate din partea clientului (în cod JavaScript):
- Metoda prin care cererea va fi trimisă către server (GET, POST).
- Adresa URL care va gestiona cererea de pe server.
- Tipul de solicitare: sincron (fals) sau asincron (adevărat).
- Numele de utilizator și parola, dacă este necesar.
Abonați-vă la evenimentul onreadystatechange al obiectului XHR și specificați handlerul ca o funcție anonimă sau numită. După aceea, vom crea un cod în interiorul acestei funcții care va verifica starea răspunsului și va efectua anumite acțiuni pe pagină. Răspunsul care vine de la server este întotdeauna în proprietatea responseText.
Pe lângă verificarea valorii proprietății readyState cu numărul 4, puteți verifica valoarea proprietății de stare. Această proprietate determină starea cererii. Dacă este 200, atunci totul este OK. În caz contrar, a apărut o eroare (de exemplu, 404 - URL-ul nu a fost găsit).
Să trimitem o cerere către server folosind metoda send ().
Dacă folosim metoda GET pentru a trimite o solicitare, atunci trecem datele în parametru aceasta metoda nu este nevoie. Acestea sunt transmise ca parte a adresei URL.
Dacă folosim metoda POST pentru a trimite o cerere, atunci datele trebuie transmise ca parametru metodei send (). În plus, înainte de a apela această metodă, trebuie să setați antetul Content-Type, astfel încât serverul să știe în ce codificare i-a venit cererea și să o poată decripta.
Să pregătim datele necesare pentru a executa cererea pe server. Dacă nu sunt necesare date pentru a executa interogarea pe server, atunci această etapă poate fi omisă.
Să creăm o variabilă care va conține o instanță a obiectului XHR (XMLHttpRequest).
Să configurăm solicitarea folosind metoda open ().
Se indică următorii parametri:
Conținutul elementului script:
// 2. Creați o cerere variabilă var request = new XMLHttpRequest (); // 3. Configurarea cererii request.open ("GET", "processing.php", adevărat); // 4. Abonarea la evenimentul onreadystatechange și procesarea acestuia folosind funcția anonimă request.addEventListener ("readystatechange", funcția () (// dacă stările cererii sunt 4 și starea cererii este 200 (OK) dacă ((request.readyState = = 4) && (request.status == 200)) (// de exemplu, afișați obiectul XHR în consola browserului console.log (request); // și răspunsul (text) primit de la server în consola de alertă .log (request.responseText); // obțineți elementul c id = welcome var welcome = document.getElementById ("bun venit"); // înlocuiți conținutul elementului cu răspunsul de la server welcome.innerHTML = request.responseText ;))); // 5. Trimiterea unei cereri către server request.send ();
Ca urmare, fișierul welcome.html va avea următorul cod:
Un exemplu de lucru AJAX
Pe server (folosind php):
- Să obținem datele. Dacă datele sunt trimise prin metoda GET, atunci din matricea globală $ _GET ["nume"]. Și dacă datele sunt transferate utilizând metoda POST, atunci din tabloul global $ _POST ["nume"].
- Folosind aceste date, să efectuăm câteva acțiuni pe server. Drept urmare, vom primi un răspuns. Să facem ecou.
Efectuarea unei cereri AJAX asincrone (metoda POST)
Să modificăm exemplul de mai sus. Acum, cererea AJAX către server va fi executată după ce faceți clic pe buton. Acesta va primi numele introdus de utilizator în elementul de intrare și îl va trimite prin metoda POST către server. După primirea răspunsului de la server, înlocuiți conținutul elementului div de pe pagină cu acesta.
Un exemplu de lucru AJAX
