Hogyan egy űrlapot újratöltése nélkül az oldal (ajax)

Hogyan egy űrlapot újratöltése nélkül az oldal (AJAX)

Ebben a cikkben bemutatjuk, hogyan kell küldeni egy formája nélkül, a háttérben az oldal ismételt betöltése (AJAX), segítségével a jquery, php. Ennek eredményeként a forgatókönyvet, a szerver küld az adatokat JSON formátumban és az ügyfél megkapja az adatokat ugyanabban a formátumban.

Web-hosting értékelése: 10-ből 8 325 értékelés

Mi az Ajax

Ajax technológia vált szerves része a Web 2.0 és most sikeres honlapok általában létre kényelem a felhasználók számára. Sőt, az Ajax technológia növeli a sebességet a helyén, annak a ténynek köszönhető, hogy a felhasználónak nem kell újratölteni az egész oldalt frissíteni néhány elem a webhelyen.

Végrehajtás az űrlapot újratöltés nélkül az oldalon

A demonstrációs projekt áll három fájlt:

Nézzük létre az első AJAX fájl elnevezésű projekt index.php az alábbi tartalommal:

Felhívjuk figyelmét, hogy az eljárás az űrlap benyújtása már a POST állítsa id = „ajax_form” és action = „”. Továbbá, miután a forma van hozzá egy div id = c result_form. Ez ebben az osztásnál fogjuk megjeleníteni a feldolgozás eredménye formában.

Azt is meg kell, hogy hozzon létre egy második fájlban - ajax.js

A ajax.js fájlban két módszer létezik: $ ( „# gmb”), kattintson és sendAjaxForm .. Az első módszer - a legfontosabb esemény hallgató. Vagyis, amikor kattintson a Küldés gombra, a hallgató elindul, és ezáltal a második módszer sendAjaxForm.

A módszer sendAjaxForm (result_form, ajax_form, url) továbbított területén: result_form - ez div amelyet kiolvasztott adatok ajax_form - id formában és küld egy üzenetet url - ezen a helyen action_ajax_form.php, amely felelős a fájl szerver rész (formák feldolgozás).

A harmadik nevű fájlt action_ajax_form.php

action_ajax_form.php - forma kezelő a szerver oldalon. Például, akkor ellenőrizze: Ha vannak változók egy POST kéréssel nevét és telefonszám, akkor létrehozunk egy tömböt $ result for JSON válasz a szervertől. Ezután a tömb $ result fordítunk a JSON objektumot ajax.js ügyfél megfelelően megkapják az adatokat JSON formátumban.

Amint látod, hogy végre AJAX küldeni az űrlap adatok újratöltése nélkül az oldal nagyon egyszerű. Töltse le a forráskódot AJAX formák, akkor a linkre. Le fájlokat a helyi szerver vagy tárhely, csomagolja ki és tegye az összes fájlt egy könyvtárba a szerveren.

A privát terület a helyszínen