JQuery je javascript biblioteka čiji je cilj "pisati manje, raditi više". jQuery je lako spojiti na vašu stranicu i početi koristiti. jQuery znatno olakšava korištenje javascripta na vašoj web stranici.
jQuery eliminira mnoštvo redaka javascript koda i omogućuje vam implementaciju čitavog niza redaka samo jednom metodom.
Što je AJAX?AJAX je asinkroni (tj. preglednik može raditi što god želi nakon slanja zahtjeva, kao što je prikazivanje poruke koja čeka odgovor, pomicanje stranice itd.) JavaScript i XML. Koristi se za izradu dinamičnih i brzih web stranica. AJAX nam omogućuje ažuriranje dijela web stranice bez ponovnog učitavanja cijele stranice.
Što je s jQueryjem i AJAX-om?Kombinacija jQuery i AJAX pruža snažnu funkcionalnost. Uz jquery i ajax možete podnijeti zahtjev i primiti informacije u različitim formatima, uključujući XML, HTML, pa čak i običan tekst. Za razmjenu podataka možete koristiti JSON format. Podatke primljene putem ajax zahtjeva možemo koristiti na našoj html stranici.
jQuery čini postojeći preglednik Ajax API moćnijim i lakšim za korištenje. Kreirajte ajax pozive na uobičajeni način korištenje javascripta je malo nezgodno: budući da to morate uzeti u obzir za različitim preglednicima potrebni su različiti pristupi za stvaranje objekta XMLHttpRequest. Dodatno, slanje podataka, na primjer iz obrazaca, postaje teže ako koristite obični javascript za ajax poziv.
jQuery pruža jednostavnu i snažnu funkcionalnost koja proširuje javascriptove AJAX metode i pruža fleksibilniji pristup.
U ovom kratkom članku ću vam pokazati kako koristiti jQuery i AJAX u jednostavnom php obliku. Krenimo... Za korištenje jQuery-ja i AJAX-a trebat će nam dvije datoteke, prva datoteka će sadržavati html/php kod kroz koji će se napraviti ajax zahtjev. U drugoj datoteci ćemo obraditi ajax zahtjev i vratiti rezultat na prvu stranicu.
Korak 1: Napravite datoteku school.php i zalijepite sljedeći kod u nju:U gornjem kodu dobivamo ime i broj učenika i koristeći jquery i ajax šaljemo ih na details.php.
funkcija getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( tip: "POST", url: " detalji .php", podaci: (fname:name, id:rno) )).done(function(rezultat) ( $("#msg").html(" Adresa broja " +rno +" je "+rezultat ) ;));
| Tvoje ime: | ||
| Broj role: | ||
U gornjem kodu dobivamo adresu studenta koristeći redni broj i njegovo ime.
Za ovaj primjer morat ćete izraditi školsku bazu podataka i tablicu učenika. Tablica učenika sadrži polja s imenima, rednim brojevima i adresama.
Nadam se da će vam ovaj članak biti od pomoći.
U ovom ćemo članku govoriti o interakciji ajaxa i php-a. Kako povezati rad ajax skripte i php koda? Kako koristiti ajax u web razvoju? Ako ste zainteresirani za takva pitanja, naći ćete odgovore na njih u našem članku. Kao i primjeri ajax php koda.
Korištenje ajax + phpDa bismo razumjeli trebamo li uopće ajax s PHP-om, shvatimo za što može biti koristan. Korištenje ajax+ php može biti raznoliko, jedino što ovom tehnologijom ne možete konstruirati elemente stranice koji su relevantni za tražilice. Budući da ajax učitava elemente stranice nakon što se učita prilikom pozivanja js događaja, ali kao što znamo, tražilice ne znaju čitati javascript kod, pa morate pažljivo odabrati gdje trebate, a gdje ne trebate koristiti ajax s php-om.
Gdje mogu koristiti ajax + php?
1. Dodavanje novog komentara
4. Organiziranje pretraživanja na stranici (auto-dovršavanje)
5. Korak po korak registracija korisnika na stranici
6. Pretplatite se na e-mail
7. Pregledajte fotografije
I drugi…
Kao što vidite, postoji mnogo opcija za korištenje ajax + php. Odnosno, može se koristiti tamo gdje ponovno učitavanje stranice ne bi bilo prikladno, gdje samo trebate razmijeniti podatke s poslužiteljem.
Gdje ne biste trebali koristiti ajax + php
Moje mišljenje je objektivno, možda vi mislite drugačije, ali na temelju svog iskustva reći ću da ajax + php ne treba koristiti:
1. Za provedbu izbornika
2. Implementacija kartica na stranici (Na primjer: kada u online trgovini na stranici proizvoda vidite recenziju, informacije, komentare, fotografije, videa... nema potrebe učitavati podatke prilikom prebacivanja ovih kartica.)
I drugi negativni primjeri koji mogu naštetiti boljem rangiranju vaše stranice.
Interakcija ajaxa s php-omZapravo, ajax tehnologija ne može postojati bez PHP skripti, budući da ajax samo šalje podatke poslužitelju i prima povratni odgovor, bez ponovnog učitavanja stranica. Stoga je ispravnije postaviti pitanje kako povezati rad ajaxa i php-a. Ali o tome ćemo govoriti u sljedećem odlomku članka (ajax php primjer), a sada ćemo razumjeti specifičnosti rada ajaxa.
Da biste poslali podatke na poslužitelj, morate stvoriti objekt XMLHTTPRequest. Pomoću njega otvorite url (php skriptu), pošaljite podatke na njega (POST ili GET metoda), primite odgovor te uz poznavanje js jezika na monitoru prikažite primljeni odgovor poslužitelja (odgovor može biti bilo koji fragment ili element stranice stranice).
Radi pojašnjenja, pogledajte donji dijagram koji prikazuje interakciju ajaxa i php-a.
Za primjer ajax interakcije s php-om, stvorimo dvije datoteke:
1. ajax_stranica.html
2. get_ajax.php
Prvo, pogledajmo korisničku stranu aplikacije, odnosno ajax_ stranicu. html:
Ajax + PHP: primjer | site function XmlHttp() ( var xmlhttp; try(xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");) catch(e) ( try (xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");) catch (E) (xmlhttp = false;) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp ) funkcija ajax(param) ( if (window.XMLHttpRequest) req = new XmlHttp(); metoda =(!param.method? "POST" : param.method.toUpperCase()); if(method=="GET") ( send=null; param.url=param.url+"&ajax=true"; ) else ( send=""; for (var i in param.data) send+= i+"="+param.data[i]+"&"; send=send+"ajax=true"; req.open(method, param. url, true);(param.statbox)document.getElementById(param.statbox).innerHTML = " 
"; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() ( if (req.readyState == 4 && req .status == 200) //ako je odgovor pozitivan ( if(param.success)param.success(req.responseText); ) ) ) Ovdje ćemo dobiti izvještaje o radu ajax aplikacije i odgovor servera.
Polje za unos 1
Unesite svoj tekst!
Polje za unos 2
Besplatan tekst... Opsjednut sam ovim člankom i želim se pretplatiti na RSS kako bih češće mogao čitati ovakve članke!!!
ajax_page.html:
Pogledajmo javascript stranu ovog primjera:
XmlHttp() je funkcija koja stvara XMLHttpRequest() objekt; napisana je što je moguće kompaktnije i višestruka.
ajax(param) – naš rukovatelj prilikom pozivanja događaja (onclick), prima potrebne podatke u polje param:
url – gdje poslati podatke, a može biti u obliku: stranica. php? parametar= vrijednost, odnosno informacije se mogu prenijeti GET metodom.
statbox – id html bloka koji će primati rezultate ajax + php aplikacije.
method – način slanja podataka, može biti POST ili GET. U našem primjeru koristimo metodu POST, ali u isto vrijeme informacije se mogu prenijeti putem url-a pomoću metode GET.
data – niz prenesenih podataka. U našem primjeru, podaci se automatski preuzimaju iz polja 1 i 2, iako možete jednostavno napisati podatke: (naziv: "vrijednost").
uspjeh – naziv funkcije ili sama funkcija koja će obraditi primljene podatke (tekst).
Poziv ajax funkcije, kao što vidite, vrši događaj onclick=ajax().
Sada pogledajmo poslužiteljsku stranu ajax + php aplikacije, to jest get_ ajax. php:
Ovdje je sve puno jednostavnije. Prvo postavljamo kodiranje izlaznih podataka pomoću zaglavlja. Postavili smo zabranu predmemoriranja podataka. sleep(2) – pauzira skriptu na 2 sekunde, ovo je kako bi se vidjela animacija čekanja wait.gif. Izdajemo primljene podatke, dok čitamo sve elemente niza $_POST i pretvaramo ih u traženo kodiranje (za ćirilicu).
Za pokretanje naše ajax php aplikacije učitajte stranicu ajax_page.html u preglednik
Ovo sam dobio kada sam kliknuo gumb TEST AJAX:
Ovo je odgovor primljen iz datoteke get_ajax.php:
Još uvijek postoje pitanja oajax +php? Pitajte ih u komentarima ispod...
Ovaj članak započeo sam na zahtjev početnika koji tek počinju svladavati JS/jQuery i, prije ili kasnije, susreću se s problemom korištenja Ajax tehnologije u praksi. U ovom dijelu ću pokušati jednostavnim jezikom (Neka ovo ne zbuni napredne korisnike) objasnite kako primijeniti ovaj "trik" koristeći jQuery biblioteku u svojim projektima.
Dakle... jQuery ima nekoliko metoda koje upućuju zahtjeve poslužiteljskoj strani stranice bez ponovnog učitavanja stranice. Nećemo promatrati svaku metodu posebno "pod mikroskopom", iz jednostavnog razloga što su sve ogoljene funkcije $.ajax() metode. Prvo, pogledajmo kod u nastavku, a zatim ćemo ga pogledati detaljnije:
HTML ( index.html datoteka)
Cool stranica Kliknite me!
U ovu datoteku smo povezali jQuery biblioteku, datoteku s našim JS kodom, gumb (id="btn"), kada se klikne, pokreće se ajax zahtjev i blok (id="output"), u kojem ispisat ćemo rezultat operacije ajax zahtjeva
JS/jQuery ( script.js datoteka)
$(function())( var output = $("#output"); // blok izlaza informacija $("#btn").on("click", function())( $.ajax(( url: " put/ do/handler.php", // put do tipa php rukovatelja: "POST", // metoda prijenosa podataka dataType: "json", // tip očekivanih podataka u podacima odgovora: (ključ: 1), // podaci koje prenosimo na poslužitelj beforeSend: function())( // Funkcija se poziva prije slanja zahtjeva output.text("Zahtjev je poslan. Čekajte odgovor."); error: function( req, text, error)( // praćenje pogrešaka tijekom dovršavanja ajax zahtjeva output.text("Houston, imamo problem! " + text + " | " + error); complete: function())( // funkcija poziva se kada je zahtjev dovršen output.append("
Zahtjev je u potpunosti ispunjen!
"); ), uspjeh: funkcija(json)( // funkcija koja će biti pozvana ako je zahtjev prema poslužitelju uspješan // json - varijabla koja sadrži podatke o odgovoru s poslužitelja. Nazovite je kako god želite;) output.html (json) ; // prikaz primljenih podataka s poslužitelja na stranici ) ));Odmah sam komentirao ovaj kod, tako da se ne bi trebala pojaviti posebna pitanja. Jedina stvar koju želim napomenuti za ljubitelje copy-paste je da trebate navesti pravi put do rukovatelja u url parametru. I još nešto - u primjeru prosljeđujemo podatke unesene ručno (ključ "ključ" s vrijednošću "1"), ali u stvarnim projektima ti se podaci preuzimaju iz nekih izvora, ali o tome ćemo kasnije.
PHP rukovatelj ( rukovatelj datotekom.php)
