hoe Ajax-formulieren in te dienen met JQuery
Inleiding
jQuery kan worden gecombineerd met het indienen van formulieren om validatie af te handelen. Dit heeft als voordeel dat gebruikers feedback krijgen over eventuele fouten in hun input.
in deze tutorial krijgt u een voorbeeldformulier te zien dat communiceert met een PHP-backend. Het formulier zal jQuery gebruiken om een formulier te verwerken zonder een pagina te vernieuwen (met behulp van AJAX), geven eventuele fouten, en ook weer een succes bericht.
Prerequisites
om deze tutorial te voltooien, heb je nodig:
- deze tutorial gaat ervan uit dat je PHP lokaal hebt geà nstalleerd en in staat bent om de ingebouwde webserver te draaien. U kunt misschien een van onze tutorials raadplegen voor het installeren van PHP in uw omgeving.
- enige bekendheid met selectors en methoden uit de jQuery bibliotheek.
- enige bekendheid met klassen uit de Bootstrap bibliotheek.
- een code-editor.
- een moderne webbrowser.
Opmerking: Deze tutorial specificeert niet de nieuwste versies van jQuery (momenteel 3.5.1) of Bootstrap (momenteel 5.0.0-beta1). Veel van de lessen in deze tutorial hebben echter nog steeds betrekking op de nieuwste versies.
deze tutorial is geverifieerd met PHP v7. 3.24, jQuery v2.0.3, en Bootstrap v3.0.3.
Stap 1-de Backend bouwen met PHP
in deze handleiding wordt de backend geschreven in PHP.
open eerst een terminalvenster en maak een nieuwe projectmap aan:
- mkdir jquery-form-validation
Ga naar deze nieuwe projectmap:
- cd jquery-form-validation
gebruik vervolgens uw code-editor om een nieuw process.php bestand aan te maken:
<?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);dit bestand zal waarden aannemen voor name, email, en superheroAlias. Als een van deze waarden niet wordt opgegeven, wordt een foutmelding teruggestuurd. Veel andere validaties kunnen worden uitgevoerd op dit punt, maar voor de doeleinden van deze tutorial, zult u alleen zorgen voor deze vereiste ingangen zijn verstrekt. Anders, als een waarde voor name, email en superheroAlias aanwezig is, zal een succesbericht worden teruggestuurd.
Noot: In een real-world scenario, zou de backend ook verantwoordelijk zijn voor andere taken, zoals het nemen van de gegevens en het opslaan van wijzigingen in een database, het maken van een sessie, of het verzenden van een e-mail.
nu de formulierverwerking is voltooid, kunt u het formulier aanmaken.
Stap 2-de Frontend bouwen met HTML en CSS
in het kader van deze handleiding zal Bootstrap worden gebruikt om de weergaven op te bouwen.
in uw projectmap, gebruik uw code-editor om een index.html bestand aan te maken:
<!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>de CDN (content delivery network) versie van Bootstrap en jQuery zal worden verwezen. action van het formulier wordt ingesteld op het PHP-bestand dat eerder is aangemaakt. Het formulier bestaat uit velden voor name, email en superheroAlias. Het formulier heeft ook een Submit-knop nodig.
Open een terminalvenster en navigeer naar de projectmap. En start de PHP server:
- php -S localhost:8000
bezoek localhost:8000 in uw webbrowser en observeer het volgende:
Nu u het formulier hebt ingevuld, kunt u het script maken om het indienen van formulieren af te handelen.
Stap 3 – handling Form Submit Logic in JavaScript en jQuery
om een formulier via AJAX in te dienen, heeft uw script vier taken nodig:
- Capture de form submit knop zodat de standaardactie niet plaatsvindt.
- haal alle gegevens uit het formulier met behulp van jQuery.
- Dien de formuliergegevens in met behulp van AJAX.
- eventuele Weergavefouten.
in uw projectmap, gebruik uw code-editor om een nieuw form.js bestand aan te maken:
$(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(); });});deze code haalt de gegevens uit de velden name, email en superheroAlias. Het voert vervolgens een Ajax-verzoek uit naar process.php met een lading formuliergegevens. Na een succesvolle verbinding zal de console de responsgegevens registreren. event.preventDefault() wordt gebruikt om te voorkomen dat het formulier zich standaard gedraagt door de pagina opnieuw te laden bij het indienen.
nadat u uw wijzigingen in form.js hebt opgeslagen, kunt u het index.html – bestand opnieuw openen met uw code-editor. Een verwijzing naar het nieuwe JavaScript-bestand toevoegen:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->wanneer een gebruiker nu op de knop Verzenden op het formulier drukt, zal de JavaScript-code alle invoerwaarden ophalen en een BERICHTAANVRAAG sturen naar process.php.
opmerking: u gebruikt de .done callback om een succesvol Ajax-verzoek af te handelen. Dit werd vroeger .success genoemd, maar dat is sindsdien verouderd in jQuery 1.8+.
een ander alternatief is serialize te gebruiken in plaats van de formulierinformatie afzonderlijk te trekken.
het PHP script zal de ingangen verwerken die de Ajax aanroep verzonden heeft en de $data array retourneren die gemaakt is. U kunt dit waarnemen in de console van uw browser nadat u uw formulier heeft ingediend:
Nu u de formulierlogica hebt voltooid, kunt u het script maken om formulierfouten af te handelen.
Stap 4 – weergave van Formuliervalidatiefouten
In het PHP-script controleert de code of alle velden vereist zijn. Als een veld niet aanwezig is, wordt een fout teruggestuurd.
Revisit form.js en voeg de volgende gemarkeerde regels code toe:
// ... $.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(); });// ...deze code controleert of het antwoord voor elk veld een fout bevat. Als er een fout aanwezig is, voegt het een has-error klasse toe en voegt de foutmelding toe.
nu, opnieuw uw formulier in een webbrowser en experimenteer met het indienen van gegevens met het formulier.
als er fouten zijn die terugkomen van de server, zal het formulier feedback geven over alle vereiste velden:
schermafbeelding van het voorbeeldformulier met fouten voor de invoervelden naam, e-mail en superheldalias.
en als er geen fouten van de server terugkomen, zal het formulier feedback geven voor een succesvolle inzending:
elke keer dat wij het formulier indienen, zijn onze fouten van onze vorige inzending nog steeds aanwezig. U moet ze wissen door ze te verwijderen zodra het formulier opnieuw wordt ingediend.
Revisit form.js en voeg de volgende gemarkeerde regels code toe:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...deze code verwijdert de has-error klasse van alle .form-group elementen. Het zal ook alle .help-block elementen met foutmeldingen verwijderen.
Stap 5 – weergave van Serververbindingsfouten
als er een fout is bij het verbinden met de server, zal er geen JSON-antwoord zijn van de Ajax-aanroep. Om te voorkomen dat gebruikers wachten op een antwoord dat nooit zal aankomen, kunt u een foutmelding geven voor verbindingsfouten.
Revisit form.js en voeg de volgende gemarkeerde regels code toe:
// ... $.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>' ); });// ...als de server om welke reden dan ook is afgebroken, zal een gebruiker die probeert een formulier in te dienen een foutmelding krijgen:
Nu u de foutmelding van de server compleet hebt, hebt u het voorbeeldformulier ingevuld.
met behulp van $.post in plaats van $.ajax
jQuery biedt ook een $.post steno-methode als alternatief voor $.ajax.
de code $.ajax in form.js kan worden herschreven met $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here });het voordeel van $.post is dat er niet zoveel verbindingsconfiguratie gedeclareerd hoeft te worden.
conclusie
in dit artikel hebt u een voorbeeldformulier gemaakt dat communiceert met een PHP-backend met jQuery en eventuele fouten in het formulier weergeeft.
als volgende stap wilt u meer complexe validaties zoals geldige e-mailadressen en datums verkennen. U kunt ook geïnteresseerd zijn in het toepassen van client-side validaties die werken in de browser.
als u meer wilt weten over JavaScript, kijk dan op onze Javascript topic Pagina voor oefeningen en programmeerprojecten.