jak odeslat formuláře AJAX s JQuery
Úvod
jQuery lze spárovat s odesláním formuláře pro zpracování ověření. To má tu výhodu, že poskytuje uživatelům zpětnou vazbu o případných chybách v jejich vstupu.
v tomto tutoriálu se zobrazí ukázkový formulář, který komunikuje s PHP backendem. Formulář použije jQuery ke zpracování formuláře bez obnovení stránky (pomocí AJAXu), označení chyb a také zobrazení zprávy o úspěchu.
předpoklady
k dokončení tohoto tutoriálu budete potřebovat:
- tento výukový program předpokládá, že máte PHP nainstalován lokálně a jsou schopni spustit vestavěný webový server. Možná budete mít možnost nahlédnout do jednoho z našich tutoriálů pro instalaci PHP ve vašem prostředí.
- některé znalosti s selektory a metodami z knihovny jQuery.
- některé znalosti tříd z knihovny Bootstrap.
- editor kódu.
- moderní webový prohlížeč.
Poznámka: Tento tutoriál nespecifikuje nejnovější verze jQuery (v současné době 3.5.1) nebo Bootstrap (v současné době 5.0.0-beta1). Mnoho lekcí v tomto tutoriálu se však stále týká nejnovějších verzí.
tento tutoriál byl ověřen pomocí PHP V7. 3. 24, jQuery v2. 0. 3 a Bootstrap v3. 0. 3.
Krok 1-Vytvoření backendu pomocí PHP
pro účely tohoto tutoriálu bude backend napsán v PHP.
nejprve otevřete okno terminálu a vytvořte nový adresář projektu:
- mkdir jquery-form-validation
přejděte do tohoto nového adresáře projektu:
- cd jquery-form-validation
poté pomocí editoru kódu vytvořte nový soubor process.php:
<?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);tento soubor bude mít hodnoty pro name, email A superheroAlias. Pokud některá z těchto hodnot není poskytnuta, bude odeslána chybová zpráva. V tomto okamžiku lze provést mnoho dalších ověření, ale pro účely tohoto tutoriálu zajistíte pouze poskytnutí těchto požadovaných vstupů. V opačném případě, pokud je přítomna hodnota pro name, email A superheroAlias, bude zpráva o úspěchu odeslána zpět.
Poznámka: Ve scénáři v reálném světě by backend byl také zodpovědný za další úkoly, jako je převzetí dat a ukládání změn do databáze, vytvoření relace nebo odeslání e-mailu.
Nyní, když máte zpracování formuláře dokončeno, můžete formulář vytvořit.
Krok 2-Vytvoření frontendu pomocí HTML a CSS
pro účely tohoto tutoriálu bude Bootstrap použit k sestavení zobrazení.
v adresáři projektu použijte editor kódu k vytvoření souboru index.html:
<!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>bude odkazováno na verzi Bootstrap a jQuery CDN (content delivery network). Formulář action bude nastaven na soubor PHP, který byl vytvořen dříve. Formulář se bude skládat z polí pro name, email A superheroAlias. Formulář bude také potřebovat tlačítko Odeslat.
otevřete okno terminálu a přejděte do adresáře projektu. A spusťte PHP server:
- php -S localhost:8000
navštivte localhost:8000 ve svém webovém prohlížeči a dodržujte následující:
Nyní, když máte formulář vyplněný, můžete vytvořit skript pro zpracování odeslání formuláře.
Krok 3-zpracování formuláře odeslat logiku v JavaScriptu a jQuery
Chcete-li odeslat formulář přes AJAX, váš skript bude muset zvládnout čtyři úkoly:
- Zachyťte tlačítko odeslat formulář, aby nedošlo k výchozí akci.
- získejte všechna data z formuláře pomocí jQuery.
- odešlete data formuláře pomocí AJAX.
- zobrazit chyby, pokud existují.
v adresáři projektu použijte editor kódu k vytvoření nového souboru form.js:
$(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(); });});tento kód načte data z polí name, email A superheroAlias. Poté provede požadavek AJAX na process.php s užitečným zatížením dat formuláře. Po úspěšném připojení konzola zaznamená data odezvy. event.preventDefault() se používá k zabránění chování formuláře ve výchozím nastavení opětovným načtením stránky při odeslání.
po uložení změn do form.js znovu navštivte soubor index.html pomocí editoru kódu. Přidejte odkaz na nový soubor JavaScriptu:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... --> Nyní, když uživatel stiskne tlačítko Odeslat na formuláři, kód JavaScript načte všechny vstupní hodnoty a odešle požadavek na příspěvek na process.php.
Poznámka: budete používat .done zpětné volání zpracovat úspěšný požadavek AJAX. To se dříve nazývalo .success, ale od té doby bylo v jQuery 1.8+zastaralé.
další alternativou je použít serialize místo toho, aby se informace o formuláři vytahovaly jednotlivě.
PHP skript zpracuje vstupy, které odeslal hovor AJAX, a vrátí pole $data, které bylo vytvořeno. Můžete to sledovat v konzole prohlížeče po odeslání formuláře:
Nyní, když máte vyplněnou logiku formuláře, můžete vytvořit skript pro zpracování chyb formuláře.
Krok 4-zobrazení chyb ověření formuláře
ve skriptu PHP kód zkontroluje, zda jsou požadována všechna pole. Pokud pole není přítomno, chyba je odeslána zpět.
znovu zadejte form.js a přidejte následující zvýrazněné řádky kódu:
// ... $.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(); });// ...tento kód zkontroluje, zda odpověď obsahuje chybu pro každé pole. Pokud je přítomna chyba, přidá třídu has-error a připojí chybovou zprávu.
nyní znovu otevřete svůj formulář ve webovém prohlížeči a experimentujte s odesíláním dat pomocí formuláře.
pokud se vyskytnou nějaké chyby, které se vrátí ze serveru, formulář poskytne zpětnou vazbu k požadovaným polím:
a pokud se ze serveru nevrátí žádné chyby, formulář poskytne zpětnou vazbu pro úspěšné odeslání:
pokaždé, když odešleme formulář, naše chyby z našeho předchozího podání stále existují. Budete je muset vymazat jejich odstraněním, jakmile bude formulář znovu odeslán.
znovu zadejte form.js a přidejte následující zvýrazněné řádky kódu:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...tento kód odstraní třídu has-error ze všech prvků .form-group. Odstraní také všechny prvky .help-block s chybovými zprávami.
Krok 5-zobrazení chyb připojení serveru
pokud dojde k chybě při připojení k serveru, nebude z volání AJAX žádná odpověď JSON. Chcete-li zabránit uživatelům čekat na odpověď, která nikdy nepřijde, můžete poskytnout chybovou zprávu o selhání připojení.
znovu zadejte form.js a přidejte následující zvýrazněné řádky kódu:
// ... $.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>' ); });// ...pokud je server z jakéhokoli důvodu přerušený nebo nefunkční, uživateli, který se pokusí odeslat formulář, se zobrazí chybová zpráva:
Nyní, když máte chybovou zprávu serveru kompletní, vyplnili jste vzorový formulář.
pomocí $.příspěvek místo $.ajax
jQuery také poskytuje $.post zkratkovou metodu jako alternativu k $.ajax.
kód $.ajax v form.js lze přepsat pomocí $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); výhodou $.post je, že nevyžaduje tolik konfigurace připojení, které mají být deklarovány.
závěr
v tomto článku jste vytvořili vzorový formulář, který komunikuje s PHP backendem s jQuery a zobrazuje všechny chyby ve formuláři.
jako další krok budete chtít prozkoumat složitější ověření, jako jsou platné e-mailové adresy a data. Také by vás mohlo zajímat použití validací na straně klienta, které fungují v prohlížeči.
pokud se chcete dozvědět více o JavaScriptu, podívejte se na naši stránku s tématem JavaScript pro cvičení a programovací projekty.