hogyan kell benyújtani AJAX űrlapok JQuery
Bevezetés
jQuery lehet párosítani űrlap benyújtása kezelni érvényesítése. Ennek az az előnye, hogy visszajelzést ad a felhasználóknak az input hibáiról.
ebben az oktatóanyagban bemutatunk egy minta űrlapot, amely kommunikál egy PHP háttérprogrammal. Az űrlap a jQuery segítségével feldolgozza az űrlapot oldalfrissítés nélkül (AJAX használatával), jelzi az esetleges hibákat, valamint sikeres üzenetet jelenít meg.
előfeltételek
az oktatóanyag befejezéséhez szüksége lesz:
- ez az oktatóanyag feltételezi, hogy a PHP helyileg telepítve van, és képes futtatni a beépített webszervert. Lehet, hogy megnézheti az egyik oktatóanyagunkat a PHP telepítéséhez a környezetében.
- néhány ismerete szelektorok és módszerek a jQuery könyvtár.
- néhány ismerete osztályok a Bootstrap könyvtár.
- egy kódszerkesztő.
- modern webböngésző.
Megjegyzés: Ez az oktatóanyag nem határozza meg a jQuery (jelenleg 3.5.1) vagy a Bootstrap (jelenleg 5.0.0-beta1) legújabb verzióit. Az oktatóanyag sok tanulsága azonban továbbra is a legújabb verziókra vonatkozik.
ezt az oktatóanyagot a PHP v7.3.24, a jQuery v2.0.3 és a Bootstrap v3.0.3 verzióval ellenőrizték.
1. lépés-a Backend felépítése PHP-vel
ezen oktatóanyag alkalmazásában a backend PHP-ben lesz írva.
először nyisson meg egy terminálablakot, és hozzon létre egy új projektkönyvtárat:
- mkdir jquery-form-validation
keresse meg ezt az új projektkönyvtárat:
- cd jquery-form-validation
ezután a kódszerkesztővel hozzon létre egy új process.php fájlt:
<?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data); ez a fájl a name, emailés superheroAlias értékeket veszi fel. Ha ezen értékek bármelyike nincs megadva, hibaüzenet kerül visszaküldésre. Ezen a ponton sok más érvényesítést is el lehet végezni, de ennek az oktatóanyagnak az alkalmazásában csak azt fogja biztosítani, hogy ezeket a szükséges bemeneteket megadták. Ellenkező esetben, ha a name, email és superheroAlias értékek vannak jelen, a rendszer egy sikeres üzenetet küld vissza.
Megjegyzés: Valós forgatókönyv esetén a háttérrendszer más feladatokért is felelős, például az adatok felvételéért, az adatbázis módosításainak mentéséért, a munkamenet létrehozásáért vagy az e-mail küldéséért.
most, hogy az űrlap feldolgozása befejeződött, létrehozhatja az űrlapot.
2.lépés — a Frontend felépítése HTML és CSS használatával
ennek az oktatóanyagnak az alkalmazásában a Bootstrap lesz használva a nézetek felépítéséhez.
a projektkönyvtárban a kódszerkesztővel hozzon létre egy index.html fájlt:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></head> <body> <div class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <form action="process.php" method="POST"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow" /> </div> <button type="submit" class="btn btn-success"> Submit </button> </form> </div> </body></html> a rendszer a Bootstrap és a jQuery CDN (content delivery network) verziójára hivatkozik. Az űrlap action értéke a korábban létrehozott PHP fájlra lesz állítva. Az űrlap a name, email és superheroAliasmezőkből áll. Az űrlapnak szüksége lesz egy Küldés gombra is.
nyisson meg egy terminálablakot, és keresse meg a projekt könyvtárát. Futtassa a PHP szervert:
- php -S localhost:8000
látogasson el a localhost:8000 oldalra a böngészőjében, és vegye figyelembe a következőket:
most, hogy kitöltötte az űrlapot, létrehozhatja a szkriptet az űrlap benyújtásának kezelésére.
3. lépés-az űrlap Beküldési logikájának kezelése a JavaScript és a jQuery alkalmazásban
az űrlap AJAX-on keresztüli elküldéséhez a szkriptnek négy feladatot kell kezelnie:
- rögzítse az űrlap elküldése gombot, hogy az alapértelmezett művelet ne történjen meg.
- Szerezd meg az összes adatot az űrlapból a jQuery használatával.
- küldje el az űrlap adatait az AJAX használatával.
- megjelenítési hibák, ha vannak ilyenek.
a projektkönyvtárban a kódszerkesztővel hozzon létre egy új form.js fájlt:
$(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); });}); ez a kód beolvassa az adatokat a name, email és superheroAlias mezőkből. Ezután egy AJAX kérést hajt végre process.php egy hasznos űrlapadattal. Sikeres kapcsolat után a konzol naplózza a válaszadatokat. A event.preventDefault() arra szolgál, hogy megakadályozza az űrlap alapértelmezett viselkedését azáltal, hogy a beküldéskor újratölti az oldalt.
Miután elmentette a módosításokat form.js – ra, keresse fel újra a index.html fájlt a kódszerkesztővel. Hivatkozás hozzáadása az új JavaScript fájlhoz:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->Most, amikor a felhasználó megnyomja a Küldés gombot az űrlapon, a JavaScript kód lekéri az összes bemeneti értéket, és POST kérést küld a process.php címre.
megjegyzés: a .done visszahívást fogja használni a sikeres AJAX kérés kezeléséhez. Ezt korábban .success – nak hívták, de ez azóta elavult a jQuery 1.8+ – ban.
egy másik alternatíva a serialize használata az űrlapinformációk külön-külön történő húzása helyett.
a PHP szkript feldolgozza az AJAX hívás által küldött bemeneteket, és visszaadja a létrehozott $data tömböt. Ezt az űrlap elküldése után megfigyelheti a böngésző konzolján:
most, hogy elkészült az űrlaplogika, létrehozhatja a szkriptet az űrlaphibák kezelésére.
4. lépés-Űrlapellenőrzési hibák megjelenítése
a PHP szkriptben a kód ellenőrzi, hogy minden mező szükséges-e. Ha nincs mező, a rendszer hibát küld vissza.
látogasson el újra form.js és adja hozzá a következő kiemelt kódsorokat:
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '<div class="help-block">' + data.errors.name + "</div>" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '<div class="help-block">' + data.errors.email + "</div>" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '<div class="help-block">' + data.errors.superheroAlias + "</div>" ); } } else { $("form").html( '<div class="alert alert-success">' + data.message + "</div>" ); } }); event.preventDefault(); });// ... ez a kód ellenőrzi, hogy a válasz tartalmaz-e hibát az egyes mezőkhöz. Ha hiba van, hozzáadja a has-error osztályt, és hozzáfűzi a hibaüzenetet.
most keresse fel újra az űrlapot egy webböngészőben, és kísérletezzen az adatok űrlappal történő benyújtásával.
ha bármilyen hiba jön vissza a szerverről, az űrlap visszajelzést ad a kötelező mezőkről:
és ha nincsenek hibák, hogy jöjjön vissza a szerver, az űrlap visszajelzést ad a sikeres benyújtása:
minden alkalommal, amikor benyújtjuk az űrlapot, a korábbi benyújtásunkból származó hibák még mindig ott vannak. Törölnie kell őket azáltal, hogy eltávolítja őket, amint az űrlapot újra benyújtják.
újra form.js és adja hozzá a következő kiemelt kódsorokat:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ... ez a kód eltávolítja a has-error osztályt az összes .form-group elemből. Ezenkívül eltávolítja az összes .help-block elemet hibaüzenetekkel.
5. lépés-kiszolgálói csatlakozási hibák megjelenítése
ha hiba történt a kiszolgálóhoz való csatlakozáskor, az AJAX hívásból nem lesz JSON válasz. Annak megakadályozása érdekében, hogy a felhasználók olyan választ várjanak, amely soha nem érkezik meg, hibaüzenetet adhat a csatlakozási hibákhoz.
látogasson el újra form.js és adja hozzá a következő kiemelt kódsorokat:
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '<div class="alert alert-danger">Could not reach server, please try again later.</div>' ); });// ...ha a kiszolgáló bármilyen okból meghibásodik vagy leáll, az űrlap elküldését megkísérlő felhasználó hibaüzenetet kap:
most, hogy elkészült a kiszolgálói hibaüzenet, kitöltötte a példa űrlapot.
használata $.post helyett $.ajax
a jQuery a $.postgyorsírási módszert is biztosítja a $.ajax alternatívájaként.
a $.ajax kódot form.js lehetne átírni $.post :
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); a $.post előnye, hogy nem igényel annyi csatlakozási konfigurációt a deklaráláshoz.
következtetés
ebben a cikkben létrehozott egy minta űrlapot, amely kommunikál egy PHP háttérprogrammal a jQuery segítségével, és megjeleníti az űrlap hibáit.
következő lépésként összetettebb érvényesítéseket szeretne felfedezni, például érvényes e-mail címeket és dátumokat. Érdekelheti a böngészőben működő ügyféloldali érvényesítések alkalmazása is.
ha többet szeretne megtudni a JavaScript-ről, nézze meg a JavaScript témakör oldalt a gyakorlatokhoz és a programozási projektekhez.