Kontakt obrazac bez ponovnog učitavanja stranice. Podnošenje slobodnog obrasca sa AJAX-om bez ponovnog učitavanja stranice Bez ponovnog učitavanja stranice php ajax
Pozdrav svima, kod razvoja web aplikacija postoji interakcija između klijentskog i serverskog dijela, na primjer, kada radite sa bazom podataka, trebate dodati, urediti ili izbrisati zapise. Često sve ide prema dobro uspostavljenoj šemi u obliku GET ili POST zahtjeva. Međutim, postoje manje neugodnosti - među kojima se glavna može istaknuti prilikom slanja PHP podaci skripta vraća odgovor sa servera i to se dešava na drugoj stranici, a ako se radi o masovnom unosu podataka, tada postaje nezgodno unositi podatke, slati ih u bazu podataka, primati odgovor na novoj stranici, a zatim se vratiti na stranicu za unos.
Da bismo ubrzali i pojednostavili rad operatera, koristićemo dinamičko dodavanje podataka bez ponovnog učitavanja stranice pomoću ajax i jquery alata, a informacije ćemo učitavati koristeći foreach php ciklus. Drugim riječima, poslat ćemo podatke u bazu podataka koristeći ajax metode i sačekati odgovor od PHP-a o uspješnom završetku zahtjeva i prikazati rezultat.
Postoji pozadinska razmjena podataka između pretraživača i servera, a web stranica se ne učitava u potpunosti, već se ažuriraju samo potrebni podaci
Da vidimo kako ovo funkcionira, pogledajmo primjere. U našem slučaju ćemo napraviti malu web aplikaciju za dodavanje imena i prezimena u bazu podataka.
Dakle, počnimo:
Prvo, napravimo datoteku index.php u kojoj ćemo opisati stilove, web forme i mehanizam za interakciju sa serverom za upravljanje podacima.
Odjeljak HEAD ovdje sadrži potrebne jquery biblioteke za razmjenu podataka, bootstrap okvir kako bi se našoj aplikaciji dao reprezentativniji izgled. Definirajmo i neke stilove: 
U sljedećoj fazi ćemo opisati izgled oznaka tijela stranice aplikacije
Ne zaboravimo kreiranje modalnog prozora za dodavanje ili uređivanje podataka, koji će se pojaviti kada kliknete na dugme „Dodaj zapis” i učinite ga skrivenim, a mi ćemo ga pozvati kada kliknete na dugme Dodaj zapis 
Pa, onda iza oznake dolazi logika odgovorna za prikaz informacija na strani klijenta, kao i za slanje i primanje rezultata sa servera. 
Resetujte varijable i ponovo kreirajte modalni prozor 
JQuery kod za rukovanje pritiskom na tipke prilikom dodavanja ili uređivanja podataka. 
Sljedeći blok koda odgovoran je za ažuriranje podataka kada kliknete na dugme Ažuriraj 
Kada kliknete na dugme Delete, aktivira se ovaj kod 
Završili smo sa index.php fajlom, klijentski deo je spreman, vreme je da napravimo serverski deo koji će primati zahteve, obavljati potrebne radnje i slati odgovor klijentskom delu aplikacije.
Dakle, nazovimo datoteku action.php i kasnije joj pristupimo sa index.php
Kreirajte vezu sa bazom podataka
Zatim opisujemo najosnovniju stvar u našoj aplikaciji: preuzimanje podataka iz baze podataka i njihovo slanje u klijentski dio programa, za učitavanje podataka na stranicu, kao i kreiranje dugmadi za ažuriranje i brisanje pored svakog zapisa. PHP foreach ciklus je odgovoran za to kako radi, možete pročitati opis na web stranici. 
Sljedeći kod upisuje proslijeđene informacije u bazu podataka 
Obrađujemo klik na dugme informacija o ažuriranju sa sljedećim kodom 
prije 2 godine | 76.1K
Šta je AJAXPrilikom izrade web stranica dešava se da moramo poslati podatke html forme bez ponovnog učitavanja stranice u pozadini (koristeći AJAX). U ovom članku ćemo se osvrnuti na ovo pitanje i na primjeru pokazati kako implementirati naš zadatak koristeći jquery i php jezike. Primit ćemo skriptu, kada se izvrši, server šalje, a klijent prima podatke u JSON formatu.
Ajax tehnologija je postala popularna i često se koristi prilikom kreiranja web stranica u WEB 2.0. Mnoge već uspješne web stranice ili web stranice u početku nastoje stvoriti pogodnost za svoje korisnike, što je važno u konkurentskom okruženju i velikom broju internetskih resursa. Osim toga, Ajax tehnologija pomaže u povećanju performansi vaše web stranice. To je zbog činjenice da korisnik ne učitava ponovo cijelu stranicu kada je potrebno ažurirati samo neke elemente/dijelove vaše stranice.
Hajde da shvatimo kako poslati podatke obrasca koristeći Ajax bez ponovnog učitavanja straniceOvdje ćemo kreirati demo projekat koji će uključivati 3 fajla:
index.php je glavna stranica na kojoj se nalazi sam obrazac
ajax.js je javascript datoteka koja sadrži ajax algoritam za obradu obrasca
action_ajax_form.php je serverski dio, koji je odgovoran za obradu podataka primljenih iz obrasca i vraća odgovor klijentu u JSON formatu
Kreirajte prvu datoteku pod nazivom index.php sa sljedećim sadržajem:
Telefon: "+result.phonenumber); ), greška: funkcija(odgovor) ( // Podaci nisu poslani $("#result_form").html("Greška. Podaci nisu poslani."); ) )); )
Postoje dvije metode u datoteci ajax.js: $("#btn").click i sendAjaxForm. Prva metoda je slušatelj događaja gumba. Odnosno, kada kliknemo na dugme Submit, slušalac se pokreće i poziva metodu sendAjaxForm.
Polja koja se šalju metodi sendAjaxForm(result_form, ajax_form, url) su: result_form je div u kojem će se podaci prikazati, ajax_form je id obrasca za slanje poruke, a url je lokacija datoteke action_ajax_form.php, koja je odgovorna za serverski dio (obrada obrasca).
Kreirajmo zadnji fajl - action_ajax_form.php
action_ajax_form.php je rukovalac obrascima na strani servera. Ova datoteka je odgovorna za pozadinski dio naše mini aplikacije. Na primjer, provjeravamo: Ako postoje ime i telefonski broj varijabli POST zahtjeva, tada kreiramo niz $result za JSON odgovor sa servera. Zatim konvertujemo niz $result u JSON objekat tako da ajax.js klijent može ispravno primiti podatke u JSON formatu.
U ovoj lekciji ćemo naučiti kako poslati obrazac bez ponovnog učitavanja stranice koristeći AJAX metodu jQuery biblioteke. Kako zapravo funkcionira klasični proces podnošenja obrasca?
Korisnik klikne na dugme na web stranici Pošalji, pretraživač postavlja zahtev serveru, kao odgovor server vraća novogenerisanu stranicu i šalje je nazad pretraživaču, a stranica se ponovo učitava.
Šta se dešava sa AJAX tehnologijom? Početak je potpuno isti, samo server reaguje drugačije - ne kreira novu stranicu, već vraća samo područje stranice koje je traženo. JS skripta djeluje na elemente tačku po tačku, tako da se cijela stranica ne učitava ponovo. Zašto je ovo dobro? Manji broj upita bazi podataka smanjuje opterećenje servera i shodno tome povećava brzinu stranice.
Koji fajlovi su potrebni?Imena datoteka su proizvoljna.
- index.html - datoteka sa formom u HTML-u
- mail.php - rukovalac koji prima podatke iz obrasca i šalje ih na e-mail korisnika
- send.js - skripta koja šalje podatke iz obrasca u PHP obrađivač, bez ponovnog učitavanja stranice
Jednostavan obrazac sa dva polja za unos imena i telefona, obavezno i dugme za slanje. Nakon forme, povezali smo eksternu jQuery biblioteku i send.js skript datoteku. Ovaj obrazac nema atribut akcije koji specificira PHP rukovalac i ne specificira metode GET/POST. U AJAX tehnologiji, ove metode su specificirane u JS skripti. Odsustvo radnje riječi na stranici smanjuje količinu neželjene pošte kroz vaš obrazac.
Pošalji
mail.php rukovalac će poslati naš obrazac na server. Kreirajmo varijable sa e-poštom primaoca (možete dodati više adresa odvojenih zarezima) i imenom stranice.
Kreirajmo varijable imena i telefona, primajući ih pomoću POST metode iz obrasca. Kreirajmo varijablu poruke koja će biti poslana primaocu putem e-pošte, a koja sadrži ime i broj telefona.
Kreiramo varijablu predmeta poruke u e-pošti i funkciju pošte s varijablama za primatelja, predmet poruke i samu poruku.
Čim korisnik popuni formular i klikne na dugme, korisnik/administrator će putem e-maila dobiti podatke iz obrasca o prijavi koju je korisnik ostavio. Tako to funkcionira.
Skripta će se izvršiti kada se učita DOM stablo.
$(document).ready(function() (
Provjerava se popunjenost polja; obrazac neće biti poslan ako je barem jedno polje ostavljeno prazno. Atribut HTML5 - obavezan nije podržan od strane svih pretraživača.
$("#form").submit(function() (
Odgovoran je za slanje podataka PHP rukovaocu putem AJAX metode. Prikupljamo sve podatke iz našeg obrasca i, koristeći funkciju serialize, pretvaramo ih u string za slanje pomoću POST metode na mail.php.
Urađena metoda potvrđuje uspješnost izvršenih radnji.
)).done(function() (
$(this).find("input").val("");
Nakon slanja podataka na mail.php, korisnik vidi prozor koji potvrđuje da je aplikacija primljena. Funkcija okidača vam omogućava da zatvorite prozor klikom na dugme OK.
Alert("Vaša prijava je prihvaćena! Hvala.");
$("#form").trigger("reset");
});
return false;
});
});
Korisnik ispunjava formular, klikne na dugme za slanje i odmah, bez ponovnog učitavanja stranice, iskače prozor sa obaveštenjem da je vaša prijava prihvaćena. Ovo je AJAX metoda.
Kreiranje AJAX obrasca bez ponovnog učitavanja stranice je uzbudljivo. A još je zanimljivije „udahnuti život“ stranicama, tome će vas naučiti moj video kurs
Ako ste tek počeli učiti PHP i već ste kreirali obrasce za podnošenje GET i POST zahtjevi, vjerovatno ste pomislili: "Kako obraditi podatke i ažurirati ih bez ponovnog učitavanja stranice?" U ovom članku ćemo na jednostavnom primjeru pokazati kako implementirati takvu obradu, a AJAX će nam pomoći u tome.
AJAX (Asinhroni Javascript i XML) je tehnologija koja omogućava web aplikacijama da izvršavaju Javascript kod bez ponovnog učitavanja stranice. Ili bolje rečeno, ne ažurira se cijela stranica, već samo dio koji nam je potreban, zbog čega se performanse sučelja značajno povećavaju.
Implementiramo slanje podataka sa padajuće liste, obradu ovih podataka na serveru i vraćanje obrađenih podataka nazad klijentu.
Prvo, morate uvesti JQuery biblioteku da bi AJAX radio. Unutar oznake
za vaš projekat pišemo:
Kategorija nije odabrana Automobili Kamioni Specijalna vozila
AJAX radi sa HTML elementima preko id atributa, tako da ne zaboravite da ga dodate u naš obrazac.
Izvan forme napravićemo dugme za slanje i div blok u kojem ćemo prikazati rezultat:
Pošalji
Kada se klikne na dugme, funkcija će se pokrenuti, njeno ime upisujemo u onclick atribut. Postavite id za blok.
Pa, idemo sada na najzanimljiviji dio - kreiranje funkcije.
Dajmo mu ime poslati. Koristeći serialize funkciju, pretvaramo skup elemenata iz našeg obrasca u string pogodan za prosljeđivanje rukovaocu. U url ćemo napisati putanju do rukovaoca, koji ćemo kreirati kasnije. Proslijedimo podatke iz poruke u podatke. Zahtjev se šalje rukovaocu.
Sada treba da kreiramo rukovalac. Već smo mu dali ime - auto_result.php. Dodajmo mu sljedeći kod:
Ovaj rukovatelj prima podatke o kategoriji koristeći POST metodu i šalje broj kategorije klijentu. Ako kategorija nije odabrana, tada se šalje vrijednost “ne”.
Vratimo se na funkciju slanja. Unutar nje, funkcija uspjeha prima broj kategorije koju šalje rukovalac. Nakon toga, poruka koja će se prikazati se bira na osnovu primljene kategorije.
Time se završava implementacija najjednostavnije dinamičke obrade.
Pogledajte sve najbolje Ajax primjere
Nedavno sam se susreo sa onim što je, po mom mišljenju, prilično čest zadatak: trebam omogućiti korisniku mogućnost postavljanja na server bilo kojeg broja, recimo, slika sa komentarom za svaku od njih u okviru jednog interfejsa. U mom slučaju to je bila: fotografija proizvoda, njegov opis i količina. Radi jasnoće, prilažem screenshot interfejsa: Ideja i algoritam rješenja Budući da se opisi i fotografije mogu mijenjati više puta kako bi se dobio konačni rezultat, odlučeno je da se implementira sljedeća šema rada: fotografije se učitavaju na server na jednoj od klikom na ikonicu fotografije, i ako je uspješan server vraća naziv slike, a ako nije uspješan, “greška”. Shodno tome, ako je uspješna, ikona fotografije zamjenjuje se sličicom učitane fotografije, a njen naziv se pohranjuje u skriveno polje obrasca odgovarajuće linije, a ako ne uspije, dobijamo ikonu fotografije i prazno skriveno polje obrasca odgovarajući red, odgovoran za naziv fotografije. Tekstualne informacije prilikom promjene bilo kojeg polja obrasca šalju se serveru, sve u formatu niza [imeFotografija, opisDetalji, količinaKomadi] - ovo je najuniverzalnije: ista metoda je odgovorna za potpuno ažuriranje liste proizvoda kada se uređuju ili izbrisano. Kao što znate, AJAX ne može slati fajlove, tako da ćemo implementirati proceduru upload-a koristeći regularnu formu, za koju ćemo navesti skriveni okvir kao cilj, koji će se ponovo učitavati umjesto stranice.
1. Na stranici kreiramo obrazac za postavljanje fotografija. Sadrži samo jedan ulaz, koji ćemo sakriti koristeći css:
