Hányszor találkozott már azzal, hogy hibás adatokat adott meg, ami miatt az oldal újratöltötte és teljesen törölte a mezőkbe beírt karaktereket. Ennek javítására van egy meglehetősen népszerű megközelítés a felhasználói felület felépítésére, és ennek neve ajax. Számos projektben megjelenik, és sokféleképpen használják.
Ajax űrlap küldése: könyvtárak összekapcsolása
Jquery könyvtár felvétele az index.php fájlba.
Van egy másik módja is a jquery beillesztésének egy dokumentumba. Le kell töltenie a könyvtárat a jquery hivatalos oldaláról, el kell helyeznie a megfelelő mappába, és be kell illesztenie a linket a következőképpen:
Dokumentumok csatlakoztatása és beállítása
1. Hozzon létre egy.php dokumentumot a webhely mappájában az Ön számára megfelelő névvel - ez az ajax php űrlapot küldi el. Ebben beírhatja, hogy az üzenetet tartalmazó szöveg milyen formátumban jelenjen meg. Például form1.php.
2. A javascript fájlok mappájában hozzon létre egy.js fájlt a következővelbármilyen kényelmes név. Például form.js.
3. Csatlakoztassa ezt a mappát a dokumentumhoz.
4. Hozzon létre egy űrlapot a következő paraméterekkel:
Ne felejtsen el mezőket létrehozni az adatok megadásához.
5. Lépjen a form1.php fájlba a webhely könyvtárában, amelybe írja be:
Most az űrlap elküldésekor a böngésző információkat jelenít meg az adatokról.
Ugyanabban a fájlban beírhatja, hogy pontosan mi és hogyan jelenik meg. Ide ciklusokat vagy algoritmusokat is írhat.
Ajax jquery űrlap küldése
1. A létrehozott form.js fájlba meg kell írnia azt a kódot, amely a webhely oldalának teljes betöltése után a fájl működéséért felelős.
$(document).ready(function(){ //A következő kódunk itt fog futni });
2. Ezután testre kell szabnia a küldés gombot. Tedd mindezt ugyanabban a fájlban.
$("form").submit(function(event) { event.preventDefault(); //a következő kód kerül ideírásra });
A kód első része felelős az oldalon lévő elem kiválasztásáért, a második pedig az alapértelmezett művelet megakadályozásáért.
3. Ezután például készítsen egy ajax űrlapot a sikerről.
$.ajax({ típus: $(this).attr('method'), url: $(this).attr('action'), adatok: new FormData(this), contentType: false, cache: false, processData: false, siker: function(result){ alert(result); } });
Az alábbiakban az egyes beállítások részletes leírása található.
- típus -ez az űrlapon benyújtott kérés típusa; mivel POST-ba kerül, a kérés típusa megfelelő lesz;
- ez - elem kiválasztása a konstrukción belül;
- attr - a vonzás (attraction) rövidítése, vagyis a kiválasztott célpont (forma) egy bizonyos paramétere vonzódik;
- url - a kérés elküldéséért felelős paraméter; ebben az esetben az űrlap paramétereibe írt (form1.php);
- data - űrlapadatokat ad meg;
- contentType - felelős a fejlécek kiszolgálónak történő elküldéséért; ebben az esetben nincs rá szükség;
- gyorsítótár – a felhasználó gyorsítótárának mentéséért felelős;
- processData – az adatok karakterláncsá alakításáért felelős;
- siker - megjeleníti a sikeres adatküldés eredményét; ezért ha az adatküldés sikeres volt, akkor a függvény műveletei végrehajtódnak.
4. Kész, most az ajax űrlap beküldésekor az oldal frissítése nélkül kapsz adatokat.
Az eredmény a form1.php fájl segítségével módosítható, ahol megadható, hogy mi is jelenjen meg pontosan ennek eredményeként. Például
Kísérletezhet és ellenőrizhet bizonyos adatok bevitelének helyességét: ha az adatok nem helyesek, akkor a kívánt üzenet jelenik meg, ellenkező esetben a megfelelő oldalra irányít át. Sok más dolog is lehetséges, bármit is kíván a szíve.
Az adatok aszinkron módon is küldhetők a szerverre. Ekkor a felhasználó szöveget ír be, és az azonnal piros színnel kiemelve jelzi, hogy a megadott adatok nem helyesek. Errőlsok kézikönyv található az interneten, ahol minden világosan el van magyarázva és példákkal bemutatva.
Következtetés
Kétségtelen, hogy az ajax hasznos eszköz a weboldalkészítésben. A jó minőségű oldalak és felületek készítéséhez egyszerűen szükséges. Érdemes megjegyezni, hogy nagyon fontos a jQuery ismerete a kép és a kódban leírtak teljes megértéséhez, mert egy egyszerű másolás-beillesztés nem mindig segít és tanít meg a kód megértésében. Mindig érdemes emlékezni arra, hogy a nyelvi verziók frissülnek, és egyes funkciók egyszerűen eltűnhetnek. Ezért nem minden megoldás releváns, gyakran az írott kód egyszerűen nem működik, vagy nem azt az eredményt hozza, amelyet a képernyőn látni szeretne.
