Létrehozni az űrlapot újratöltés nélkül az oldalon
Ebben a leírásban akkor jelenik meg, hogyan kell egy kapcsolatfelvételi űrlapot, amelyen keresztül küldünk egy e-mail nélkül oldalfrissítés jQuery. Kezdjük.
Feltétlenül javasoljuk, hogy töltse le a forráskódot az egész leckét. Lesz egy php script, amely megvalósítja a folyamat az üzenetek kézbesítése.
Röviden, egy nagyon hasznos lecke!
1. lépés - hozzon létre egy HTML űrlapot közvetlenül maga
Vessünk egy pillantást a html kódot. Kezdjük az alapvető html formában:
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
Lehet, hogy észrevette, hogy én is benne div id contact_ forma, amely magában foglalja az összes kód formájában. Lehet, hogy még észre, hogy már elhagyta a paraméterek fellépés és eljárás üres. Megcsináltam a célra, mert a bővebben később vigyázni jQuery.
A másik fontos dolog. Ne felejtsük el, hogy tartalmazza az id értéke az egyes beviteli mezőben (a vonal kezdődik az input a címkét). Ezek id érték jQuery script keresni formában feldolgozó.
Én hozzáadtam némi CSS stílusokat, és a háttér képet a Photoshop, hogy a következő formában:
2. lépés - elkezd hozzá jQuery
A következő lépés az, hogy elkezd hozzá részein jQuery kódot. Azt feltételezi, hogy a B már letöltötte a jQuery.
Az első funkció (function ()) megkezdi a letöltést eseményeket, amint a html dokumentum készen áll. Ha ezt megtette minden munkát a jQuery, a funkció ugyanaz, mint document.ready funkciót. A kód lehet megérteni, hogy van egy funkció gombra kattintva, a nevét az osztály «gombot». Így itt már elérte ugyanazt a hatást, mint ha mi voltunk a beviteli mezőbe a mi formájában hozzáadott funkció onclick „Küldés” gombra.
3. lépés - írásban formában beviteli ellenőrzés
Belül a függvényt, amely tele van, amikor az oldal kész, adjunk hozzá egy kevés érvényesítése a bevitt adatokat. És az első dolog, amit látni, ez az a hozzáadott $ ( 'Error'.) Hide (). Ez szükséges ahhoz, hogy fedezze a 3 címke címke «hiba» osztályban. Végtére is, azt akarjuk, hogy rejtve, nem csak az első oldalon terhelést, de ha megnyomja a „küldés”, abban az esetben, ha az egyik üzenetek jelennek meg a felhasználó előtt. Minden hibaüzenet jelenjen meg csak akkor, ha belépett a hibás adatok.
Ellenőrizze az első mező: ha a név mező üresen maradt a felhasználó, akkor megjelenik egy üzenet, rögzített címke címke NAME_ERROR azonosító. Ezután tesszük a hangsúlyt a beviteli mező neve, ha a felhasználó tévesztendő össze, hogy mit kell csinálni. (Azt hiszem, ez nem ér sokat törzs, amikor a felhasználó forma)
Elmagyarázom, hogyan működik ez a dolog. A „name” változó írunk az értéket, amelyet a mezőbe írt az azonosító „név” - ez csak egy vonal jQuary.
Ezután ellenőrzi, hogy a mező üres, és ha igen, akkor használja jQuery show () metódus, hogy megjelenjen a címke id «NAME_ERROR».
Aztán vissza a fókuszt a pályáról az azonosító „név”, és vissza hamis származó funkciókat.
Győződjön meg róla, hogy a végén a visszatérő hamis, egyébként az értéke minden mezőt küldjük (ami teljesen sérti az ötletet, ez a lecke) kódot. return false nem teszi lehetővé a felhasználó küld az űrlap adatokat, amíg az összes mezők kitöltése.
4. lépés - a folyamat az űrlap elküldése adatokat jQuery Ajax funkciók
Most megy, hogy úgy mondjam, hogy a szíve a tananyag - létrehozását az oldal frissítése nélkül menüben, amely elküldi az űrlapot értékeket a php scripteket a háttérben. Nézzük először az összes kód egészét, aztán majd beszélünk külön elvitték. Adjuk hozzá a kódot ugyanazon a dokumentumon tutorial.js, csak alul a kódot írt fenti bekezdésben.
Van egy csomó folyik itt! Nézzük osztani az összes kódot részéről. Részben ez könnyebb megérteni. Először létrehozunk egy string értéket. Ez tartalmazza az értékeket valamennyi területen a formában, hogy szeretnénk átadni a forgatókönyvet, hogy küld egy üzenetet.
Korábban már kijelentette, a „name” változó, és állítsa be az értéket, amelyet a mezőbe írt „név” azonosítót.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
Tudjuk használni az értéke a „name” ismét, valamint az értéke „email” és a „telefon”, hogy hozzon létre egy string dataString értékek:
Most, hogy a fő funkciója - ajax. Ez mind a tevékenység zajlik, ezért kiemelt figyelmet szenteljen.
Alapvetően mi történik a kód. ajax () függvény feldolgozza értékeit dataString vonal (adatok: dataString), a hívás php script nevű process.php (url: »bin / process.php»), POST metódussal (típus: »POST»). Ha a szkript fut sikeresen, akkor képes lesz arra, megjelenik egy üzenet, hogy a felhasználót a siker, és végül visszatér esik, ha az oldal nem frissül. Ez minden. Az egész folyamat zajlik mindössze néhány sor!
Vannak fejlettebb dolgot lehet itt csinálni, ahelyett, hogy küldeni és fogadni e-mail üzeneteket az elért kereset. Például, akkor küldje be az értékeket az adatbázisba, feldolgozza azokat, majd megjeleníti az eredményeket vissza a felhasználónak. Tehát ha van egy szavazás az oldalon, akkor nem tudja feldolgozni azokat, és megjeleníti a szavazás eredményét a felhasználó frissítése nélkül az egész oldalt.
Foglaljuk össze, ami történt a mi példánkban, hogy megbizonyosodjon arról, hogy mindannyian elfogadták. Ittuk értelmében jQuery és akkor adjuk a húr, mint ez:
Akkor szoktuk jQuery funkció - ajax feldolgozásra értékek dataString vonalon. Ezután a folyamat véget ér sikeresen megtörtént, megjelenik egy üzenet, hogy a felhasználó és vissza hamis, ha nincs frissítés ezen az oldalon:
5. lépés - hajtják végre a show egy felhasználót, ha az adatok bevitelét egy formája
Nézzük röviden, hogy nézd meg egy darab kódot, amely megvalósítja a kijelzőn a felhasználó számára.
Először is, mi fog változni a teljes tartalmát CONTACT_FORM Div (emlékszem, azt mondta, hogy szüksége lesz erre a div), a következő sort:
Mi történt? Lecseréltük a div id = "CONTACT_FORM", jQuery html () függvényt. Tehát ahelyett, hogy van egy új formája div id = c „üzenet”. Ezután tegye a div üzenet - ez lesz h2 tag aláírásával „Kapcsolat űrlap elküldve”
Következő fogunk hozzá még több tartalmat a div segítségével jQuery append () függvény, akkor elrejtheti az összes div üzenetünket jQuery hide () függvény, és alkalmazza hűvös hatást, hogy a megjelenése fadeIn () fuektsiii.
A végén, ez az, amit a felhasználó lát, miután a beírást adatok formájában:
Ebben a leckében szentelt elküld egy űrlapot újratöltés nélkül az oldalon, AJAX eszközök és jQuery, befejeződött. Minden a legjobb!
Fordította és szerkesztette: Victor Horn és Andrew Bernátsky. webformyself csapat.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
Most nézd persze a munkaszervezés dinamikus formák!