În era web modernă, majoritatea site-urilor web devin din ce în ce mai interactive. Dacă anterior, pentru a primi date actualizate, era nevoie să reîmprospătăm întreaga pagină, acum au apărut tehnologii care ne permit să nu încărcăm întreaga pagină, ci doar o parte separată a acesteia. La rândul său, acest lucru oferă confort atât utilizatorilor, cât și proprietarilor de server, deoarece pagina se va încărca mai repede pentru utilizator, deoarece este încărcată doar o parte separată a paginii, iar serverul nu trebuie să genereze pagina de fiecare dată și să o dea lui. utilizatorul. Aceste caracteristici sunt ușor de implementat folosind php și ajax.

Astăzi ne vom uita la un mic exemplu pentru a înțelege mai bine cum funcționează conceptul AJAX. Uneori este dificil pentru începători să înțeleagă modul în care php și ajax interacționează între ele, mulți oameni caută exemple despre cum să valideze formularele din mers fără a reîncărca întreaga pagină; Vă voi arăta pe scurt cum se face acest lucru, astfel încât să puteți înțelege elementele de bază și principiile care vă vor permite să stăpâniți mai rapid alte instrumente și să vă scrieți propriile scripturi în viitor.

Să venim cu o mică sarcină pentru noi înșine, vom verifica prezența unei adrese de e-mail în baza de date fără a reîncărca pagina folosind php și ajax. Acest exemplu va demonstra bine cum putem interacționa cu serverul fără a reîncărca pagina în browser și, de asemenea, acesta este adesea folosit pentru diferite tipuri de validări ale formularelor de utilizator. În directorul rădăcină vom crea 3 fișiere denumite index.php, email.php, validate.js.

Crearea unei pagini

Să creăm o pagină simplă cu un singur formular care conține un singur câmp pentru introducerea unui e-mail.
Sintaxa fișierului index.php

Tutorial AJAX

Cel mai simplu mod de a lucra cu AJAX este conectarea cadrului jQuery, care este exact ceea ce am făcut. jQuery ne oferă o sintaxă ușor de înțeles și ușor de utilizat pentru trimiterea cererilor AJAX, așa că de ce să nu profitați de ea?

Crearea unui script js

Sintaxa fișierului validate.js

$(document).ready(function())( var email = ""; $("#email").keyup(function())( var valoare = $(this).val(); $.ajax(( tip: "POST", url:"email.php", date:"email="+valoare, succes:function(msg)( if(msg == "valid")( $("#message").html( "Acest e-mail poate fi utilizat. Acest e-mail este deja preluat." ) ) ) )); „Vă rugăm, puneți date în toate e-mailurile”); else( $.ajax(( tip: „POST”, url:”email.php”, data:”add_email="+email, succes:function(msg))( $ ("#message" ).html(msg) ));

handler PHP

Acest script va primi o solicitare POST de la client, o va procesa și va returna rezultatul. AJAX citește rezultatul și ia o decizie pe baza acestuia.
Sintaxa fișierului Email.php

$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["email"]) && $_POST["email"] != "")( $email = $_POST["email"]; $email = mysqli_real_escape_string($conexiune,$email); dacă (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "invalid"; )else( $sql = "SELECT ID FROM email WHERE email="$email""; $rezultat = mysqli_query($conexiune,$sql); if( mysqli_num_rows($rezultat) == 1)( echo "invalid"; )else( echo "valid"; ) ) ) if(isset($_POST["add_email"]) && $_POST["add_email"] != "" )( $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT INTO email(email) VALUES("$email")"; if(mysqli_query($connection,$sql))( echo Succes"; )else( echo "Eroare"; ) )

În scriptul nostru PHP, cel mai obișnuit cod care procesează o solicitare de postare și imprimă un anumit text pe pagină. Drept urmare, AJAX trimite o solicitare unui script php, scriptul o procesează și produce rezultatul, AJAX citește rezultatul și schimbă pagina în timp real.

AJAX trimite o solicitare POST către script folosind această bucată de cod:

$.ajax(( tip:"POST", url:"email.php", date:"email="+valoare, succes:function(msg)( if(msg == "valid")( $("#mesaj) ").html("Acest e-mail poate fi folosit."); email = valoare; )else( $("#mesaj").html("Acest e-mail este deja preluat."); ) ) ));

tip - Tip cerere, POST sau GET. În cazul nostru POST;
url - adresa script-ului la care este trimisă cererea;
date - date care sunt transmise în cerere;
succes - ce trebuie făcut ca urmare a executării cu succes a cererii. În cazul nostru, funcția este numită;

În scriptul propriu-zis, prezența unui e-mail în baza de date este verificată de fiecare dată când un caracter este introdus în câmpul de e-mail. În script, secțiunea $("#email").keyup(function()()); , care verifică apăsarea tastei într-un câmp cu id = „email” .
După cum puteți vedea, codul este destul de simplu și nu necesită abilități deosebit de mari pentru a înțelege, totul este legat de procesarea evenimentelor keyup() - o apăsare de tastă, click() - un clic de mouse pe un element. Aceasta este urmată de o solicitare AJAX și un răspuns din script. Astfel, folosind php și ajax puteți obține posibilități aproape nelimitate de a crea pagini interactive.
Acest cod nu pretinde a fi de înaltă calitate, dar dacă îl dezvoltați, adăugați validările corecte la nivel de client și server și introduceți css, atunci poate fi folosit în proiectele dvs.
Dacă aveți întrebări, nu ezitați să scrieți comentarii.
Va doresc o zi buna si ne vedem curand :)

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 - un format de text bazat pe javascript. Poate fi folosit în aproape orice limbaj de programare.

jQuery, cerere Ajax folosind metoda POST jQuery.post(url,,,)

• Primul argument (url) este adresa URL a documentului la care este trimisă cererea;
• Al doilea argument (date) sunt datele trimise către server, de obicei reprezentate ca un obiect js;
• Al treilea argument (callback(data, textStatus, jqXHR)) este o funcție apelată după ce serverul răspunde. Ca argumente, această funcție preia datele trimise de server ca răspuns la cerere și starea modului în care cererea a fost executată.

json_decode() și json_encode()

În PHP (de la 5.2), suportul JSON este inclus în nucleu sub forma funcțiilor json_decode() (decodifică un șir JSON) și json_encode(), care convertesc ele însele tipurile de date JSON în tipurile PHP corespunzătoare și invers.

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, true)); $arr = json_decode($json, adevărat); ecou"
".$arr["a"]. "
".$arr["b"]. "
"; Matrice de rezultate(5) ( ["a"] => int(1) ["b"] => int(2) ) 1 2 Exemplu de solicitare Ajax folosind metoda POST

Ce vom face:
Verificăm corectitudinea datelor trimise (printr-o solicitare AJAX POST) (datele sunt introduse de utilizator). Dacă datele sunt corecte, afișăm un mesaj. În caz contrar, adăugăm câmpurilor evidențiere roșie. Totul funcționează asincron, adică fără a reîncărca pagina. Puteți utiliza acest principiu, de exemplu, pentru a crea un sistem de comentarii care inserează comentarii într-o bază de date.

jQuery $(document).ready(function())( var working = false; /* Acest indicator împiedică trimiterea mai multor comentarii: */ $("form").submit(function(e)( e.preventDefault() ; if(work) return false; $("#submit").val("Așteptați.."); serialize(),function(msg)( /* Trimite valorile formularului la 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("form").slideDown(); ) else ( // Dacă există errors , parcurgeți obiectul // msg.errors și afișați-le pe pagina $.each(msg.errors,function(k,v)( $("#"+k).addClass("error"); // alert(k); "json"); HTML Introduceți un număr Introduceți e-mailul PHP // acceptă 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"=>"Vă mulțumesc, datele dvs. sunt exacte")); // informații returnate server ) else ( if(filter_var($arr, FILTER_VALIDATE_EMAIL) == false) ( $errors["email"] = "Vă rugăm introduceți un nume."; ) if(filter_var($arr, FILTER_VALIDATE_INT) == false) ( $ errors["intt"] = "Vă rugăm introduceți un nume."; $arr = $errors; /* Afișează mesaje de eroare */ echo "("status":0,"errors":".json_encode($arr) ")";

Când am început să folosesc JavaScript și JQuery, am fost frustrat de lipsa exemplelor simple de utilizare a Ajax în jQuery.

Trebuie să înțelegeți că o solicitare Ajax este aceeași cu orice altă solicitare. Singura diferență este că utilizatorul nu trebuie să reîncarce pagina. De exemplu, acest lucru va permite utilizatorului să trimită date de formular fără a accesa o altă pagină web.

Exemplu de solicitare GET trimisă folosind jQuery și Ajax:

$.ajax(( tip: "GET", url: "test.php", succes: function(data)( alert(data); ) ));

Exemplul de cod trece trei parametri:

• tip: tip cerere HTTP. În acest exemplu, trimit o solicitare GET. Dacă doriți să trimiteți o solicitare POST, schimbați „GET” în „POST”.
• url: adresa la care doriți să trimiteți cererea Ajax. În cazul nostru, aceasta este pagina „test.php”. Rețineți că adresa URL este relativă la pagina curentă.
• succes : o funcție care este apelată dacă cererea a avut succes. Acceptă un parametru de date, care va conține rezultatul paginii test.php. Adică, dacă test.php scoate șirul „OK”, atunci parametrul de date va conține șirul „OK”.

Experimentați cu codul de mai sus. De exemplu, înlocuiți „GET” cu „POST” și schimbați adresa URL. Puteți utiliza instrumentele pentru dezvoltatori încorporate în Firefox/Chrome pentru a depana solicitările Ajax. Sunt disponibile în fila Rețea. Instrumentele pentru dezvoltatori vă permit să vizualizați cererea.

Ce se întâmplă dacă vrem să adăugăm parametrii de solicitare GET la o solicitare Ajax?

$.ajax(( tip: "GET", url: "test.php", date: (nume:"Wayne"), succes: function(data)( alert(data); ) ));

Am adăugat un nou parametru de date. Acesta este un obiect JavaScript care conține datele pe care le transmitem în cerere. Deoarece trimitem o solicitare GET, acești parametri vor fi adăugați automat la șirul de interogare: test.php?name=Wayne

Exemplu de adăugare a mai multor parametri GET:

$.ajax(( tip: "GET", url: "test.php", date: (nume: "Wayne", vârsta: 27, țara: "Irlanda"), succes: function(data)( alert(data) ; ) ));

Codul de mai sus va trimite o solicitare GET către test.php?name=Wayne&age=27&country=Ireland

Experimentați cu codul pentru a-l înțelege. Încercați să adăugați și să eliminați parametri pentru a înțelege cum să trimiteți date folosind jQuery și Ajax.

Ce se întâmplă dacă dorim să trimitem o solicitare POST către fișierul submission.php?

$.ajax(( tip: "POST", url: "submission.php", date: (nume:"Wayne", vârsta: 27), succes: function(data)( alert(data); ) ));

Am schimbat tipul metodei (de la GET la POST) și URL (la submission.php). În acest exemplu, numele și parametrii de vârstă vor fi trimiși ca variabile POST. Aceasta înseamnă că în pagina submission.php acestea pot fi preluate folosind următorul cod:

$nume = $_POST[„nume”]; $varsta = $_POST["varsta"];

Dacă utilizați o solicitare GET, variabilele vor fi trimise prin șirul de interogare. Îi puteți contacta după cum urmează:

$nume = $_GET[„nume”]; $varsta = $_GET["varsta"];

Ultima piesă a puzzle-ului este funcția succes(). Este apelat dacă cererea Ajax se finalizează cu succes. În exemplul de mai sus, scot rezultatul într-un mesaj. Dar, în majoritatea cazurilor, veți folosi această funcție pentru a afișa notificări pe pagină. De exemplu, dacă un utilizator trimite un formular folosind Ajax, atunci această funcție este folosită pentru a valida răspunsul. Și, de asemenea, pentru a afișa un mesaj că datele formularului au fost trimise cu succes la server.

Sper că acest articol v-a ajutat să înțelegeți elementele de bază ale solicitărilor Ajax!

Această publicație este o traducere a articolului „Exemplu de solicitare Ajax simplă cu JQuery și PHP”, pregătită de echipa prietenoasă de proiect

Comparația este întotdeauna interesantă și dificilă în același timp - mai ales când sistemele comparate îndeplinesc aceleași funcții, dar o fac în moduri diferite.
Aplicațiile web moderne devin din ce în ce mai sofisticate și din ce în ce mai încărcate cu o logică complexă.

Metoda jQuery.post() face o solicitare HTTP POST pentru a prelua date de pe server.

Sintaxa metodei jQuery.post().

jQuery.post(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ])

• url - șir care conține adresa URL a solicitării pentru trimiterea datelor.
• date - un șir sau obiect simplu (matrice asociativă) de date care urmează să fie trimise către server.
• success(data, textStatus, jqXHR) - funcția de apel invers, apelată dacă cererea are succes.
• dataType - șir, tip de date așteptat de la server. În mod implicit, jQuery încearcă să detecteze automat (xml, json, script sau html).

Exemplul de mai jos este echivalentul jQuery.ajax() al lui jQuery.post():

$.ajax(( tip: „POST”, url: url, date: date, succes: succes, dataType: dataType ));

Funcției de apel invers de succes îi sunt transmise datele returnate, care pot fi un element rădăcină XML, un șir de text, un fișier JavaScript sau un obiect JSON, în funcție de tipul MIME al răspunsului. Se transmite și starea textului răspunsului.

Începând cu jQuery 1.5, un obiect jqXHR este transmis funcției de succes.

Cele mai multe implementări ale handler-ului de succes sunt setate după cum urmează:

JQuery.post("ajax/test.html", function(data) ( $(".result").html(data); ));

Acest exemplu solicită cod HTML și îl inserează în pagină în locația specificată.

Datele primite de metoda jQuery.post() nu sunt niciodată memorate în cache, astfel încât parametrii cache și ifModified ai metodei jQuery.ajaxSetup() vor fi ignorați.

obiect jqXHR.

De la jQuery 1.5, toate metodele AJAX returnează un obiect XMLHttpRequest extins. Acesta este un obiect jQuery XHR, sau jqXHR pe scurt, returnat de jQuery.post() care implementează interfața Promise, oferindu-i toate proprietățile, metodele și comportamentul Promise (consultați Obiectul amânat pentru mai multe informații). jqXHR.done() (în loc de succes), jqXHR.fail() (în loc de eroare) și jqXHR.always() (în loc de complete) preiau un argument la o funcție care este apelată atunci când cererea este finalizată. Pentru informații despre argumentele acestei funcție, consultați secțiunea de documentație jQuery.ajax().

Interfața Promise permite, de asemenea, metodelor AJAX din jQuery, inclusiv JQuery.post(), să creeze un lanț de jqXHR.done(), jqXHR.fail(), jqXHR.always(), adică. de mai multe metode de apel invers pentru fiecare cerere și chiar atribuiți aceste funcții după ce solicitarea a fost finalizată. Dacă cererea a fost deja finalizată, metodele nou atribuite vor fi executate imediat.

// Atribuiți cereri imediat după solicitare // și salvați obiectul jqXHR al acestei solicitări. var jqxhr = $.get("example.php", function() ( alert("succes"); )) .done(function() ( alert("al doilea succes"); )) .fail(function() ( alert(„eroare”); ) ). // executați niște cod aici... // Adăugați un nou handler de finalizare a cererii pentru o cerere deja finalizată jqxhr.always(function())(alert("second finished");));

Handler-uri depreciate.

Metodele jqXHR.success(), jqXHR.error(), jqXHR.complete() au fost depreciate începând cu jQuery 1.8. Aceste metode vor fi eliminate în viitor. Folosiți jqXHR.done(), jqXHR.fail(), jqXHR.always() în schimb.

Notă suplimentară.

• Din cauza restricțiilor de securitate ale browserului, majoritatea solicitărilor AJAX sunt limitate de aceeași politică de securitate. Solicitările AJAX nu pot prelua cu succes informații din alte domenii, subdomenii sau protocoale.
• Dacă apare o eroare în timpul unei solicitări jQuery.get(), aceasta nu va apărea în mod vizibil până când nu este apelată metoda globală jQuery.ajaxError(). O alternativă la gestionarea erorilor, începând cu jQuery 1.5, este obiectul jqXHR returnat de jQuery.get().

Exemple

Exemplu: se face o cerere către pagina test.php, dar nu sunt procesate date.

JQuery.post("test.php");

Exemplu: O solicitare către pagina test.php cu unele date trimise (fără procesarea datelor primite).

JQuery.post("test.php", (nume: "Ioan", ora: "2pm" ));

Exemplu: O serie de date este transferată către server (fără procesarea datelor primite).

JQuery.post ("test.php", ("alegeri": ["Jon", "Susan"]));

Exemplu: trimiterea datelor din formular folosind o solicitare Ajax.

JQuery.post("test.php", jQuery ("#testform").serialize());

Exemplu: Notificăm despre primirea cu succes a datelor din pagina test.php (HTML sau XML, în funcție de datele primite).

JQuery.post("test.php", function(data) ( alert("Date încărcate: " + date); ));

Exemplu: Notificăm despre primirea cu succes a datelor de pe pagina test.cgi cu trimitere de date suplimentare (HTML sau XML, în funcție de datele primite).

JQuery.post("test.php", (nume: "Ioan", ora: "2pm" )) .done(function(data) ( alert("Date Loaded: " + data); ));

Exemplu: Obțineți conținutul paginii test.php returnat în format JSON() și trimiteți-l în pagină.

JQuery.post("test.php", function(data) ( $("body").append("Nume: " + data.name) // John .append ("Ora: " + data.time); / /2pm), "json");

Exemplu: trimiterea datelor din formular folosind o solicitare Ajax și inserarea datelor primite într-un div.

// adaugă un handler de trimitere a formularelor $("#searchForm").submit(function(event) ( // dezactivează funcționalitatea standard a handler-ului de formular event.preventDefault(); // obține câteva date din elementele paginii var $form = $(this) , term = $form.find("input").val(), url = $form.attr("action" // trimite date la server cu o cerere POST var posting = $.post). (url, ( s: termen )); // inserați rezultatele primite posting.done(function(data) ( var content = $(data).find("#content"); $("#result").empty ().append(conținut) ;

Face o cerere către server folosind metoda POST, fără a reîncărca pagina. Funcția are câțiva parametri opționali.

url - URL la care va fi trimisă solicitarea.
date - date care vor fi trimise către server. Ele trebuie reprezentate sub formă de obiect, în formatul: (fNume1:valoare1, fNume2:valoare2, ...) .
callback(data, textStatus, jqXHR) este o funcție personalizată care va fi apelată după ce serverul răspunde.

Usor de folosit

Cea mai simplă solicitare ajax: vom trimite o cerere goală către server și nu vom procesa răspunsul. Aceasta poate fi folosită, de exemplu, pentru a număra de câte ori cursorul a trecut cursorul peste un banner (un semnal va fi trimis către server pentru fiecare hover).

$.post("/plusOne.php" );

Să ne uităm la interacțiunea mai complexă cu serverul. Să trimitem datele către server și să le procesăm. Javascript-ul ar arăta astfel:

// O solicitare pentru pagina http://hostname/ajaxtest.php va fi trimisă către server și vor fi specificați doi parametri.

// După primirea unui răspuns de la server, va fi apelată funcția onAjaxSuccess, care // va afișa un mesaj cu datele trimise de server.

$.post ( "/ajaxtest.php" , ( param1: "param1" , param2: 2 ) , onAjaxSuccess ) ;

function onAjaxSuccess(data) ( // Aici primim datele trimise de server si le afisam pe ecran. alert (date) ; )

Pe server, procesarea unei cereri Ajax nu este diferită de procesarea unei cereri obișnuite:

Ca urmare a acestei solicitări, pe pagină va apărea un semn cu textul „I get param1 = param1 and param2 = 2”

Utilizare avansată

$.post() este o versiune scurtă a funcției $.ajax(), apelată cu următorii parametri:$.ajax (( url: url, tip: "POST" , date: date, succes: succes, dataType: dataType ) );

Detalii despre cum să utilizați parametrul dataType pot fi găsite în descrierea $.ajax() .

Comentariu:

Majoritatea browserelor nu permit solicitări Ajax pentru resurse cu alte domenii, subdomenii și protocoale decât cel actual. Cu toate acestea, această limitare nu se aplică solicitărilor jsonp și script-urilor.

// Să lansăm o cerere ajax, să instalăm handlere pentru execuția ei și // să salvăm obiectul jqxhr al acestei solicitări pentru utilizare ulterioară.