Hvordan Sende INN AJAX-Skjemaer Med JQuery
Introduksjon
jQuery kan kobles sammen med skjemainnlevering for å håndtere validering. Dette har fordelen av å gi brukerne tilbakemelding på eventuelle feil i deres innspill.
i denne opplæringen vil du bli presentert med et eksempelskjema som kommuniserer TIL EN PHP-backend. Skjemaet vil bruke jQuery til å behandle et skjema uten sideoppdatering( VED HJELP AV AJAX), angi eventuelle feil, og også vise en suksessmelding.
Forutsetninger
for å fullføre denne opplæringen trenger du:
- denne opplæringen forutsetter AT DU HAR PHP installert lokalt og kan kjøre den innebygde webserveren. Du kan kanskje konsultere en av våre opplæringsprogrammer for å installere PHP i ditt miljø.
- noen kjennskap til velgere og metoder fra jquery biblioteket.
- noen kjennskap til klasser Fra Bootstrap biblioteket.
- en koderedigerer.
- en moderne nettleser.
Merk: denne opplæringen angir ikke de nyeste versjonene av jQuery (for tiden 3.5.1) Eller Bootstrap (for tiden 5.0.0-beta1). Men mange av leksjonene i denne opplæringen gjelder fortsatt de nyeste versjonene.
denne opplæringen ble verifisert MED PHP v7. 3.24, jQuery v2.0.3 og Bootstrap v3.0.3.
Trinn 1-Bygg Backend med PHP
i forbindelse med denne opplæringen vil backend bli skrevet I PHP.
først åpner du et terminalvindu og oppretter en ny prosjektkatalog:
- mkdir jquery-form-validation
Naviger til denne nye prosjektkatalogen:
- cd jquery-form-validation
bruk deretter kodeditoren til å opprette 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); denne filen vil ta verdier for name, email og superheroAlias. Hvis noen av disse verdiene ikke er oppgitt, sendes en feilmelding tilbake. Mange andre valideringer kan utføres på dette punktet, men i forbindelse med denne opplæringen vil du bare sikre at disse nødvendige inngangene er gitt. Ellers, hvis en verdi for name, email og superheroAlias er til stede, sendes en melding om suksess tilbake.
Notat: I et virkelig scenario vil backend også være ansvarlig for andre oppgaver som å ta dataene og lagre endringer i en database, opprette en økt eller sende en e-post.
nå som du har skjemabehandlingen fullført, kan du opprette skjemaet.
Trinn 2-Bygg Frontend med HTML og CSS
I forbindelse med denne opplæringen Vil Bootstrap bli brukt til å bygge ut visningene.
i prosjektkatalogen bruker du koderedigering til å opprette 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-versjonen (content delivery network) av Bootstrap og jQuery vil bli referert. Skjemaets action vil bli satt TIL PHP-filen som ble opprettet tidligere. Skjemaet vil bestå av felt for name, email og superheroAlias. Skjemaet vil også trenge En Send-knapp.
Åpne et terminalvindu og naviger til prosjektkatalogen. Og kjøre PHP-serveren:
- php -S localhost:8000
Gå til localhost:8000 i nettleseren din og følg følgende:
Nå som du har utfylt skjemaet, kan du opprette skriptet til å håndtere skjemainnlevering.
Trinn 3-Håndtering Av Skjema Send Logikk I JavaScript og jQuery
for å sende inn et skjema via AJAX, må skriptet håndtere fire oppgaver:
- Fange skjemaet send-knappen slik at standardhandlingen ikke finner sted.
- Få alle dataene fra skjemaet ved hjelp av jQuery.
- Send inn skjemadata ved HJELP AV AJAX.
- Vis feil hvis det er noen.
bruk kodeditoren til å opprette 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(); });}); denne koden henter dataene fra feltene name, email og superheroAlias. DEN utfører DERETTER EN AJAX forespørsel til process.php med en nyttelast av skjemadata. Etter en vellykket tilkobling logger konsollen svardataene. event.preventDefault() brukes til å hindre at skjemaet oppfører seg som standard ved å laste siden på nytt ved innsending.
når du har lagret endringene til form.js, kan du gå tilbake til index.html – filen med kodeditoren. Legg til en referanse til Den Nye JavaScript-filen:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... --> Nå når en bruker trykker På Send-knappen på skjemaet, Vil JavaScript-koden hente alle inngangsverdiene og sende EN POSTFORESPØRSEL til process.php.
Merk: du skal bruke .done tilbakeringing for å håndtere en VELLYKKET AJAX forespørsel. Dette pleide å bli kalt .success, men det har siden blitt avskrevet i jQuery 1.8+.
Et annet alternativ er å bruke serialize i stedet for å trekke skjemainformasjonen individuelt.
PHP-skriptet vil behandle inngangene SOM AJAX-anropet sendte og returnere $data – arrayet som ble opprettet. Du kan observere dette i nettleserens konsoll etter at du har sendt inn skjemaet:
Nå som du har skjemalogikken fullført, kan du opprette skriptet for å håndtere skjemafeil.
Trinn 4-Vise Skjemavalideringsfeil
I PHP-skriptet kontrollerer koden at alle feltene er obligatoriske. Hvis et felt ikke finnes, sendes en feil tilbake.
Gå tilbake form.js og legg til følgende uthevede kodelinjer:
// ... $.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(); });// ... denne koden kontrollerer om svaret inneholder en feil for hvert felt. Hvis det finnes en feil, legger den til en klasse has-error og legger til feilmeldingen.
nå kan du besøke skjemaet i en nettleser og eksperimentere med å sende inn data med skjemaet.
hvis det er noen feil som kommer tilbake fra serveren, vil skjemaet gi tilbakemelding på alle nødvendige felt:
og hvis det ikke er noen feil som kommer tilbake fra serveren, vil skjemaet gi tilbakemelding for en vellykket innsending:
Hver gang vi sender inn skjemaet, er våre feil fra vår tidligere innsending fortsatt der. Du må fjerne dem ved å fjerne dem så snart skjemaet er sendt inn igjen.
Besøk form.js og legg til følgende uthevede kodelinjer:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ... denne koden fjerner has-error – klassen fra alle .form-group – elementer. Det vil også fjerne alle .help-block elementer med feilmeldinger.
Trinn 5-Viser Servertilkoblingsfeil
hvis det oppstår en feil ved tilkobling til serveren, blir DET ikke NOE json-svar fra AJAX-anropet. For å hindre at brukerne venter på et svar som aldri kommer, kan du gi en feilmelding for tilkoblingsfeil.
Gå tilbake form.js og legg til følgende uthevede kodelinjer:
// ... $.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>' ); });// ...hvis serveren er brutt eller ned av en eller annen grunn, vil en bruker som forsøker å sende inn et skjema få en feilmelding:
nå som du har serverfeilmeldingen fullført, har du fullført eksempelskjemaet.
Bruke $.post i stedet for $.ajax
jQuery gir også en $.post stenografi metode som et alternativ til $.ajax.
$.ajax koden i form.js kan skrives om med $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); fordelen med $.post er at det ikke krever så mye tilkoblingskonfigurasjon som skal deklareres.
Konklusjon
i denne artikkelen bygde du et eksempelskjema som kommuniserer TIL EN PHP-backend med jQuery og viser eventuelle feil i skjemaet.
som et neste trinn vil du utforske mer komplekse valideringer som gyldige e-postadresser og datoer. Du kan også være interessert i å bruke klientsiden valideringer som fungerer i nettleseren.
hvis du vil lære Mer Om JavaScript, sjekk Ut Vår JavaScript-emneside for øvelser og programmeringsprosjekter.