Susisiekimo forma neperkraunant puslapio. Savavališkos formos pateikimas AJAX neįkeliant puslapio iš naujo Neperkraunant puslapio php ajax
Sveiki visi, kuriant žiniatinklio programas kliento ir serverio pusė sąveikauja, pavyzdžiui, dirbant su duomenų baze, reikia pridėti, redaguoti ar ištrinti įrašus. Dažnai viskas vyksta pagal nusistovėjusią schemą GET arba POST užklausų forma. Tačiau yra nedidelių nepatogumų – tarp kurių galima išskirti pagrindinį, siunčiant PHP duomenys scenarijus grąžina atsakymą iš serverio ir tai atsitinka kitame puslapyje, o jei tai yra masinis duomenų įvedimas, tampa nepatogu įvesti duomenis, siųsti juos į duomenų bazę, gauti atsakymą naujame puslapyje ir tada grįžti į įvesties puslapį.
Operatoriaus darbui paspartinti ir supaprastinti naudosime dinaminį duomenų papildymą neperkraunant puslapio naudojant ajax ir jquery įrankius, o informaciją įkelsime naudojant foreach php kilpą. Kitaip tariant, duomenis į duomenų bazę siųsime ajax metodais ir lauksime atsakymo iš PHP apie sėkmingą užklausos įvykdymą ir parodysime rezultatą.
Fone vyksta duomenų mainai tarp naršyklės ir serverio, o tinklalapis nėra visiškai įkeliamas iš naujo, o atnaujinami tik reikalingi duomenys
Norėdami pamatyti, kaip tai veikia, pažvelkime į keletą pavyzdžių. Mūsų atveju sukursime nedidelę žiniatinklio programą, kad į duomenų bazę būtų įtrauktas pirmasis ir antrasis vardas.
Taigi, pradėkime:
Pirmiausia sukurkime index.php failą, kuriame aprašome stilius, žiniatinklio formas ir sąveikos su serveriu mechanizmą duomenims valdyti.
Skiltyje HEAD čia nurodomos būtinos jquery bibliotekos duomenų mainams, įkrovos sistema, kad mūsų programa būtų reprezentatyvesnė. Taip pat apibrėžkime keletą stilių: 
Kitame žingsnyje mes apibūdinsime išvaizda programos puslapio turinio žyma
Nepamirškime sukurti modalinį duomenų pridėjimo ar redagavimo langą, kuris atsiras paspaudus mygtuką „Pridėti įrašą“ ir padarius jį paslėptą, o mes jį iškviesime paspaudę mygtuką Pridėti įrašą 
Na, o po žymės ateina logika, atsakinga už informacijos atvaizdavimą kliento pusėje, taip pat rezultato siuntimą ir gavimą iš serverio. 
Iš naujo nustatykite kintamuosius ir iš naujo sukurkite modalinį langą 
jQuery kodas, skirtas apdoroti klavišų paspaudimus pridedant arba redaguojant duomenis. 
Už duomenų atnaujinimą atsakingas šis kodo blokas – kai paspaudžiate mygtuką Atnaujinti 
Kai paspausite mygtuką ištrinti, šis kodas suaktyvinamas 
Index.php failas baigtas, kliento dalis paruošta, laikas padaryti serverio dalį, kuri priims užklausas, atliks reikiamus veiksmus ir išsiųs atsakymą į kliento programos dalį.
Taigi pavadinkime failą action.php ir vėliau jį pasieksime iš index.php
Duomenų bazės ryšio sukūrimas
Toliau aprašome patį elementariausią dalyką mūsų programoje, tai yra duomenų gavimas iš duomenų bazės ir siuntimas į kliento programos dalį, kad būtų galima įkelti duomenis į puslapį, taip pat naujinimo ir trynimo mygtukų formavimas šalia kiekvieno. Įvedimo, PHP foreach ciklas atsako, kaip jis veikia, galite perskaityti aprašymą svetainėje. 
Šis kodas įrašo perduotą informaciją į duomenų bazę 
Apdorojame mygtuko paspaudimo atnaujinimo informaciją naudodami šį kodą 
prieš 2 metus | 76,1 tūkst
Kas yra AJAXKuriant svetaines, pasitaiko, kad mums reikia pateikti html formos duomenis neperkraunant puslapio fone (naudojant AJAX). Šiame straipsnyje mes apsvarstysime šią problemą ir pavyzdžiu parodysime, kaip įgyvendinti savo užduotį naudojant jQuery ir PHP kalbas. Gausime scenarijų, kurį vykdydamas serveris siunčia, o klientas gauna duomenis JSON formatu.
„Ajax“ technologija išpopuliarėjo ir dažnai naudojama kuriant svetaines WEB 2.0. Daugelis jau sėkmingai veikiančių ar besikuriančių svetainių siekia sukurti patogumą savo vartotojams, o tai svarbu esant konkurencinei aplinkai ir dideliam interneto išteklių kiekiui. Be to, Ajax technologija padeda padidinti jūsų svetainės greitį. Taip yra dėl to, kad vartotojas neįkelia viso puslapio iš naujo, kai reikia atnaujinti tik kai kuriuos svetainės elementus / dalis.
Išsiaiškinkime, kaip siųsti formos duomenis naudojant „Ajax“, neįkeliant puslapio iš naujoČia sukursime demonstracinį projektą, kuriame bus 3 failai:
index.php yra pagrindinis puslapis, kuriame yra pati forma
ajax.js yra javascript failas, kuriame yra ajax algoritmas formai apdoroti
action_ajax_form.php yra serverio dalis, atsakinga už duomenų, gautų iš formos, apdorojimą ir grąžinanti atsakymą klientui JSON formatu
Sukurkite pirmąjį failą pavadinimu index.php su tokiu turiniu:
Telefonas: "+result.phonenumber); ), klaida: function(response) ( // Duomenys neišsiųsti $("#result_form").html("Klaida. Duomenys neišsiųsti."); ) )); )
Failas ajax.js turi du metodus: $("#btn").click ir sendAjaxForm. Pirmasis metodas yra mygtuko įvykių klausytojas. Tai yra, kai paspaudžiame mygtuką pateikti, klausytojas įsijungia ir iškviečia sendAjaxForm metodą.
Metodui sendAjaxForm(result_form, ajax_form, url) perduodami šie laukai: result_form yra div, į kurį bus pateikiami duomenys, ajax_form yra pranešimo siuntimo formos ID, o url yra failo action_ajax_form.php vieta. kuri yra atsakinga už serverio pusę (formos apdorojimą).
Sukurkime paskutinį failą – action_ajax_form.php
action_ajax_form.php yra serverio pusės formų tvarkytuvas. Šis failas yra atsakingas už mūsų mini programos užpakalinę dalį. Pavyzdžiui, atliekame patikrinimą: jei POST užklausos pavadinime ir telefono numeryje yra kintamųjų, sudarome $result masyvą JSON atsakymui iš serverio. Tada konvertuojame $result masyvą į JSON objektą, kad ajax.js klientas galėtų teisingai gauti duomenis JSON formatu.
Šioje pamokoje sužinosime, kaip pateikti formą iš naujo neįkeliant puslapio naudojant jQuery bibliotekos AJAX metodą. Kaip apskritai veikia klasikinis formų pateikimo procesas?
Vartotojas spusteli mygtuką svetainėje Siųsti, naršyklė pateikia užklausą serveriui, atsakydamas serveris pateikia naujai sugeneruotą puslapį ir siunčia jį atgal į naršyklę, o puslapis įkeliamas iš naujo.
Kas atsitiks su AJAX technologija? Pradžia lygiai tokia pati, tik serveris reaguoja skirtingai – negeneruoja naujo puslapio, o grąžina tik tą puslapio sritį, kurios buvo užklausta. JS scenarijus veikia elementus taškiškai, todėl puslapis nėra visiškai įkeliamas iš naujo. Kodėl tai gerai? Mažiau duomenų bazės užklausų sumažina serverio apkrovą ir atitinkamai padidina svetainės greitį.
Kokie failai reikalingiFailų pavadinimai yra savavališki.
- index.html – HTML formos failas
- mail.php – tvarkytojas, kuris gauna duomenis iš formos ir siunčia juos į kliento el
- send.js – scenarijus, kuris siunčia duomenis iš formos į PHP tvarkyklę neperkraunant puslapio
Paprasta forma su dviem privalomais įvesties laukais vardui ir telefono numeriui bei pateikimo mygtuku. Po formos įtraukėme išorinę jQuery biblioteką ir scenarijaus failą send.js. Ši forma neturi veiksmo atributo, kuris nurodo PHP tvarkyklę ir nenurodo GET metodai/post. AJAX technologijoje šie metodai nurodyti JS scenarijuje. Jei puslapyje nėra žodžio veiksmas, jūsų formoje sumažėja šlamšto kiekis.
Siųsti
mail.php tvarkytojas pateiks mūsų formą serveriui. Sukurkime kintamuosius su gavėjo el. pašto adresu (galite pridėti daugiau adresų, atskirtų kableliais) ir svetainės pavadinimu.
Sukurkime vardo ir telefono kintamuosius, gaudami juos POST metodu iš formos. Sukurkime pranešimo kintamąjį, kuris bus išsiųstas gavėjui paštu, kuriame yra vardas ir telefono numeris.
El. pašte sukuriame pranešimo temos kintamąjį ir pašto funkciją su gavėjo, pranešimo temos ir pranešimo kintamaisiais.
Kai tik vartotojas užpildys formą ir paspaudžia mygtuką, klientas / administratorius gaus duomenis iš vartotojo paliktos anketos el. paštu. Taip ir veikia.
Scenarijus bus vykdomas, kai bus įkeltas DOM medis.
$(document).ready(function() (
Tikrinant, ar užpildyti laukai, forma nebus siunčiama, jei bent vienas laukas bus tuščias. HTML5 atributas – būtinas , palaikomas ne visose naršyklėse.
$("#form").submit(function() (
Atsakingas už duomenų siuntimą į PHP tvarkyklę AJAX metodu. Mes renkame visus duomenis iš savo formos ir naudodamiesi serializavimo funkcija konvertuojame juos į eilutę, skirtą POST metodu siųsti į mail.php.
Atliktas metodas patvirtina atliktų veiksmų sėkmę.
))atlikta(funkcija() (
$(this).find("įvestis").val("");
Nusiuntus duomenis į mail.php , vartotojas mato langą, patvirtinantį, kad užklausa gauta. Trigerio funkcija leidžia uždaryti langą spustelėjus mygtuką Gerai.
Alert("Jūsų paraiška priimta! Ačiū.");
$("#form").trigger("nustatyti iš naujo");
});
return false;
});
});
Vartotojas užpildo formą, paspaudžia pateikimo mygtuką ir akimirksniu, neperkraunant puslapio, pasirodo langas, nurodantis, kad jūsų paraiška priimta. Tai yra AJAX metodas.
Sukurti AJAX formą iš naujo neįkeliant puslapio yra smagu. Ir dar įdomiau „įkvėpti gyvybės“ į puslapius, mano vaizdo kursas jus to išmokys
Jei ką tik pradėjote mokytis PHP ir jau esate sukūrę duomenų siuntimo formas su GET ir POST užklausomis, tikriausiai pagalvojote: „Kaip apdoroti duomenis ir atnaujinti neperkraunant puslapio? Šiame straipsnyje mes parodysime, kaip įgyvendinti tokį apdorojimą naudojant paprasčiausią pavyzdį, o AJAX mums padės tai padaryti.
AJAX (asinchroninis Javascript ir XML) yra technologija, leidžianti žiniatinklio programoms vykdyti Javascript kodą neįkeliant puslapio iš naujo. Atvirkščiai, atnaujinamas ne visas puslapis, o tik mums reikalinga dalis, todėl sąsajos greitis žymiai padidėja.
Įgyvendiname duomenų siuntimą iš išskleidžiamojo sąrašo, šių duomenų apdorojimą serveryje ir apdorotų duomenų grąžinimą klientui.
Pirmiausia turite importuoti jQuery biblioteką, kad AJAX veiktų. Etiketės viduje
Jūsų projektui rašome:
Kategorija nepasirinkta Lengvieji automobiliai Sunkvežimiai Specialios transporto priemonės
AJAX veikia su HTML elementais per id atributą, todėl nepamirškite jo įtraukti į formą.
Už formos ribų sukursime pateikimo mygtuką ir div bloką, kuriame parodysime rezultatą:
Siųsti
Paspaudus mygtuką, bus paleista funkcija, jos pavadinimą nurodome atribute onclick. Nustatykite bloko ID.
Na, o dabar pereikime prie įdomiausio dalyko – funkcijos kūrimo.
Duokime pavadinimą siųsti. Naudodami serializavimo funkciją paverčiame elementų rinkinį iš mūsų formos į eilutę, tinkamą perduoti tvarkytojui. Į url įrašysime kelią iki tvarkyklės, kurią sukursime vėliau. Perduokime duomenis iš žinutės į duomenis. Yra prašymas vedėjui.
Dabar turime sukurti tvarkyklę. Jai jau suteikėme pavadinimą - auto_result.php. Pridėkime prie jo šį kodą:
Šis tvarkytuvas POST metodu gauna kategorijų duomenis ir siunčia kategorijos numerį klientui. Jei nepasirinkta jokia kategorija, siunčiamas „ne“.
Grįžkime prie siuntimo funkcijos. Jo viduje sėkmės funkcija gauna tvarkytojo atsiųstą kategorijos numerį. Po to išvesties pranešimas parenkamas pagal gautą kategoriją.
Tai užbaigia paprasčiausio dinaminio apdorojimo įgyvendinimą.
Peržiūrėkite visus šauniausius „Ajax“ pavyzdžius
Neseniai susidūriau su gana, mano nuomone, įprasta užduotimi: reikia suteikti vartotojui galimybę į serverį įkelti bet kokį skaičių, tarkime, paveikslėlius su komentarais apie kiekvieną iš jų vienoje sąsajoje. Mano atveju tai buvo: prekės nuotrauka, jos aprašymas ir kiekis. Aiškumo dėlei pridedu sąsajos ekrano kopiją: Idėja ir sprendimo algoritmas serveris grąžina vaizdo pavadinimą, o sugedus - "klaida". Atitinkamai, sėkmės atveju nuotraukos piktograma pakeičiama įkeltos nuotraukos miniatiūra, o jos pavadinimas išsaugomas atitinkamos eilutės paslėptame formos lauke, o jei nepavyksta, gauname nuotraukos piktogramą ir tuščią paslėptos formos lauką. atitinkamos eilutės, atsakingos už nuotraukos pavadinimą. Tekstinė informacija, pakeitus bet kurį formos lauką, siunčiama į serverį masyvo formatu [pavadinimasNuotrauka, aprašymasDetalės, kiekisDaliai] - tai yra universaliausia: tas pats metodas yra atsakingas už visišką produktų sąrašo atnaujinimą juos redaguojant. arba ištrintas. Kaip žinote, AJAX nemoka siųsti failų, todėl atsisiuntimo procedūrą įgyvendinsime naudodami įprastą formą, kurios taikiniu nurodysime paslėptą rėmelį, kuris bus perkraunamas vietoj puslapio.
1. Sudarome formą nuotraukai įkelti puslapyje. Jame yra tik viena įvestis, kurią paslėpsime naudodami css:
