hur man skickar in Ajax-formulär med JQuery
introduktion
jQuery kan kopplas ihop med formulärinsändning för att hantera validering. Detta har fördelen att ge användarna feedback om eventuella fel i deras inmatning.
i denna handledning kommer du att presenteras med ett provformulär som kommunicerar med en PHP-backend. Formuläret använder jQuery för att bearbeta ett formulär utan en siduppdatering (med AJAX), ange eventuella fel och visa också ett framgångsmeddelande.
förutsättningar
för att slutföra denna handledning behöver du:
- denna handledning förutsätter att du har PHP installerat lokalt och kan köra den inbyggda webbservern. Du kanske kan konsultera en av våra handledning för att installera PHP i din miljö.
- viss förtrogenhet med väljare och metoder från jQuery-biblioteket.
- viss kännedom om klasser från Bootstrap-biblioteket.
- en kodredigerare.
- en modern webbläsare.
Obs: Denna handledning anger inte de senaste versionerna av jQuery (för närvarande 3.5.1) eller Bootstrap (för närvarande 5.0.0-beta1). Men många av lektionerna i denna handledning gäller fortfarande de senaste versionerna.
denna handledning verifierades med PHP v7.3.24, jQuery v2.0.3 och Bootstrap v3.0. 3.
Steg 1-Bygga Backend med PHP
i denna handledning kommer backend att skrivas i PHP.
öppna först ett terminalfönster och skapa en ny projektkatalog:
- mkdir jquery-form-validation
navigera till den här nya projektkatalogen:
- cd jquery-form-validation
använd sedan din kodredigerare för att skapa en ny process.php fil:
<?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); den här filen TAR värden för name, email och superheroAlias. Om något av dessa värden inte anges skickas ett felmeddelande tillbaka. Många andra valideringar kan utföras vid denna tidpunkt, men i denna handledning kommer du bara att se till att dessa nödvändiga ingångar har tillhandahållits. Annars, om ett värde för name, email och superheroAlias finns, skickas ett framgångsmeddelande tillbaka.
notera: I ett verkligt scenario skulle backend också vara ansvarig för andra uppgifter som att ta data och spara ändringar i en databas, skapa en session eller skicka ett e-postmeddelande.
nu när du har slutfört formulärbehandlingen kan du skapa formuläret.
steg 2-Bygga Frontend med HTML och CSS
i denna handledning kommer Bootstrap att användas för att bygga ut vyerna.
Använd din kodredigerare i din projektkatalog för att skapa en index.html fil:
<!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> CDN (content delivery network) version av Bootstrap och jQuery kommer att refereras. Formulärets action kommer att ställas in på PHP-filen som skapades tidigare. Formuläret kommer att bestå av fält för name, email och superheroAlias. Formuläret behöver också en Skicka-knapp.
öppna ett terminalfönster och navigera till projektkatalogen. Och kör PHP-servern:
- php -S localhost:8000
besök localhost:8000 i din webbläsare och observera följande:
nu när du har fyllt i formuläret kan du skapa skriptet för att hantera formulärinsändning.
steg 3-hantering av formulär skicka logik i JavaScript och jQuery
för att skicka in ett formulär via AJAX måste ditt skript hantera fyra uppgifter:
- fånga formuläret Skicka knappen så att standardåtgärden inte äger rum.
- Hämta Alla data från formuläret med jQuery.
- skicka formulärdata med AJAX.
- visa fel om det finns några.
Använd din kodredigerare i din projektkatalog för att skapa en ny form.js fil:
$(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(); });}); den här koden hämtar data från fälten name, email och superheroAlias. Den utför sedan en Ajax-begäran till process.php med en nyttolast av formulärdata. Efter en lyckad anslutning loggar konsolen svardata. event.preventDefault() används för att förhindra att formuläret fungerar som standard genom att ladda om sidan vid inlämning.
när du har sparat dina ändringar till form.js, besök filen index.html med din kodredigerare. Lägg till en referens till den nya JavaScript-filen:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->nu när en användare trycker på Skicka-knappen på formuläret kommer JavaScript-koden att hämta alla inmatningsvärden och skicka en postförfrågan till process.php.
Obs: du kommer att använda .done återuppringning för att hantera en lyckad Ajax begäran. Detta brukade kallas .success, men det har sedan dess avvecklats i jQuery 1.8+.
ett annat alternativ är att använda serialize istället för att dra formulärinformationen individuellt.
PHP-skriptet kommer att bearbeta ingångarna som AJAX-samtalet skickade och returnera $data – arrayen som skapades. Du kan observera detta i webbläsarens konsol när du har skickat in ditt formulär:
nu när du har formulärlogiken klar kan du skapa skriptet för att hantera formulärfel.
steg 4-visar Formulärvalideringsfel
i PHP-skriptet kontrollerar koden för att säkerställa att alla fält krävs. Om ett fält inte finns, skickas ett fel tillbaka.
återbesök form.js och Lägg till följande markerade kodrader:
// ... $.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(); });// ... den här koden kontrollerar om svaret innehåller Ett fel för varje fält. Om ett fel är närvarande lägger det till en has-error – klass och lägger till felmeddelandet.
gå nu igenom formuläret i en webbläsare och experimentera med att skicka in data med formuläret.
om det finns några fel som kommer tillbaka från servern kommer formuläret att ge feedback på alla obligatoriska fält:
och om det inte finns några fel som kommer tillbaka från servern, kommer formuläret att ge feedback för en lyckad inlämning:
varje gång vi skickar in formuläret finns våra fel från vår tidigare inlämning fortfarande kvar. Du måste rensa dem genom att ta bort dem så snart formuläret skickas in igen.
återbesök form.js och Lägg till följande markerade kodrader:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...den här koden tar bort Klassen has-error från alla .form-group – element. Det tar också bort alla .help-block – element med felmeddelanden.
Steg 5-visar Serveranslutningsfel
om det finns ett fel vid anslutning till servern kommer det inte att finnas något JSON-svar från Ajax-samtalet. För att förhindra att användare väntar på ett svar som aldrig kommer fram kan du ange ett felmeddelande för anslutningsfel.
återbesök form.js och Lägg till följande markerade kodrader:
// ... $.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>' ); });// ...om servern är trasig eller nere av någon anledning får en användare som försöker skicka ett formulär ett felmeddelande:
nu när du har serverfelmeddelandet slutfört har du fyllt i exempelformuläret.
med användning av $.post istället för $.ajax
jQuery ger också en $.post stenografi metod som ett alternativ till $.ajax.
$.ajax koden i form.js kan skrivas om med $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); fördelen med $.post är att det inte kräver så mycket Anslutningskonfiguration som ska deklareras.
slutsats
i den här artikeln byggde du ett exempelformulär som kommunicerar med en PHP-backend med jQuery och visar eventuella fel i formuläret.
som nästa steg vill du utforska mer komplexa valideringar som giltiga e-postadresser och datum. Du kanske också är intresserad av att tillämpa valideringar på klientsidan som fungerar i webbläsaren.
om du vill lära dig mer om JavaScript, kolla in vår JavaScript-ämnessida för övningar och programmeringsprojekt.