miten lähettää AJAX lomakkeet jQuery
Johdanto
jQuery voidaan parittaa lomakkeen lähettämistä käsitellä validointi. Tämän etuna on se, että käyttäjät saavat palautetta mahdollisista syötevirheistä.
tässä opetusohjelmassa sinulle esitetään näytelomake, joka kommunikoi PHP-taustajärjestelmään. Lomake käyttää jQuery käsitellä lomakkeen ilman sivun päivitystä (käyttämällä AJAX), ilmoittaa mahdolliset virheet, ja myös näyttää menestysviestin.
Edeltävät opinnot
tämän opetusohjelman suorittamiseen tarvitset:
- tämä opetusohjelma olettaa, että sinulla on PHP asennettuna paikallisesti ja pystyt suorittamaan sisäänrakennetun web-palvelimen. Voit ehkä kuulla yksi tutorials asentamista PHP ympäristössäsi.
- jonkin verran perehtyneisyyttä jQueryn kirjastosta löytyneisiin valintoihin ja menetelmiin.
- jonkin verran tutustumista Bootstrap-kirjaston luokkiin.
- koodieditori.
- moderni verkkoselain.
Huom: Tämä opetusohjelma ei määrittele jQueryn (tällä hetkellä 3.5.1) tai Bootstrapin (tällä hetkellä 5.0.0-beta1) viimeisimpiä versioita. Kuitenkin, monet oppitunnit tämän opetusohjelman edelleen koskevat uusimpia versioita.
tämä opetusohjelma varmistettiin PHP v7.3.24: llä, jQuery v2.0.3: lla ja Bootstrap v3.0.3: lla.
Step 1-Building the Backend with PHP
For the purposes of this tutorial, the backend will be written in PHP.
avaa ensin pääteikkuna ja luo uusi projektikansio:
- mkdir jquery-form-validation
Siirry tähän uuden projektin hakemistoon:
- cd jquery-form-validation
luo sitten koodieditorilla uusi process.php tiedosto:
<?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);tämä tiedosto ottaa arvot name, email ja superheroAlias. Jos mitään näistä arvoista ei anneta, virheviesti lähetetään takaisin. Monet muut validoinnit voitaisiin suorittaa tässä vaiheessa, mutta tämän opetusohjelman tarkoituksia varten, sinun tulee vain varmistaa, että nämä tarvittavat tulot on annettu. Muussa tapauksessa, jos arvo name, email ja superheroAlias on olemassa, lähetetään menestysviesti takaisin.
Huom.: Reaalimaailman skenaariossa taustaosa olisi vastuussa myös muista tehtävistä, kuten tietojen ottamisesta ja muutosten tallentamisesta tietokantaan, istunnon luomisesta tai sähköpostin lähettämisestä.
nyt kun olet saanut lomakkeen käsittelyn valmiiksi, voit luoda lomakkeen.
Step 2-Building the Frontend with HTML and css
For the purposes of this tutorial, Bootstrap will be used to build out the views.
luo projektihakemistossasi koodieditorilla index.html tiedosto:
<!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>Bootstrapin ja jQueryn CDN (content delivery network) – versioon viitataan. Lomakkeen action asetetaan aiemmin luotuun PHP-tiedostoon. Lomake koostuu kentistä name, email ja superheroAlias. Lomake tarvitsee myös Lähetä-painikkeen.
avaa pääteikkuna ja siirry projektihakemistoon. Ja suorita PHP-palvelin:
- php -S localhost:8000
käy localhost:8000 selaimessasi ja noudata seuraavia:
nyt kun lomake on täytetty, voit luoda skriptin käsittelemään lomakkeen jättämistä.
Step 3-Handling Form Submit Logic in JavaScript and jQuery
to submit a form via AJAX, your script will need to handling four Task:
- kaavake Lähetä-painiketta niin, että oletustoiminto ei tapahdu.
- Hae kaikki tiedot lomakkeesta jQueryn avulla.
- lähetä lomaketiedot Ajaxia käyttäen.
- Näyttövirheet, jos niitä on.
luo projektihakemistossasi koodieditorilla uusi form.js tiedosto:
$(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(); });}); tämä koodi hakee tiedot kentistä name, email ja superheroAlias. Sen jälkeen se suorittaa Ajax-pyynnön process.php hyötykuormalla lomakedataa. Onnistuneen yhteyden jälkeen konsoli kirjaa vastaustiedot. event.preventDefault() käytetään estämään lomakkeen oletusarvon mukainen toiminta lataamalla sivu uudelleen lähetettäessä.
kun olet tallentanut muutokset form.js – tiedostoon, palaa index.html – tiedostoon koodieditorillasi. Lisää viittaus uuteen JavaScript-tiedostoon:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->nyt kun käyttäjä painaa lomakkeen lähetä-nappia, JavaScript-koodi hakee kaikki syötearvot ja lähettää POSTIPYYNNÖN numeroon process.php.
Huom: käytät .done callbackia käsitelläksesi onnistuneen AJAX-pyynnön. Tätä kutsuttiin ennen nimellä .success, mutta se on sittemmin vanhentunut muodossa jQuery 1.8+.
toinen vaihtoehto on käyttää serialize sen sijaan, että vetäisi lomaketiedot yksittäin.
PHP-skripti käsittelee Ajax-puhelun lähettämät syötöt ja palauttaa syntyneen $data – ryhmän. Voit tarkkailla tätä selaimesi konsolissa sen jälkeen, kun olet lähettänyt lomakkeen:
nyt kun olet saanut lomakelogiikan valmiiksi, voit luoda skriptin käsittelemään muotovirheitä.
Vaihe 4-lomakkeiden validointivirheiden Näyttäminen
PHP-skriptissä koodi tarkistaa, että kaikki kentät ovat pakollisia. Jos kenttää ei ole, virhe lähetetään takaisin.
palaa form.js ja lisää seuraavat korostetut koodirivit:
// ... $.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(); });// ... tämä koodi tarkistaa, sisältääkö vastauksessa virhe kunkin kentän osalta. Jos virhe on olemassa, se lisää has-error – luokan ja liittää virheilmoituksen.
käy nyt lomake uudelleen verkkoselaimessa ja kokeile Tietojen lähettämistä lomakkeella.
jos palvelimelta tulee virheitä, lomake antaa palautetta vaadituista kentistä:
ja jos palvelimelta ei tule virheitä, lomake antaa palautteen onnistuneesta lähetyksestä:
joka kerta kun toimitamme lomakkeen, virheemme aiemmasta toimituksesta ovat edelleen olemassa. Sinun täytyy tyhjentää ne poistamalla ne heti, kun lomake on lähetetty uudelleen.
palaa form.js ja lisää seuraavat korostetut koodirivit:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...tämä koodi poistaa has-error luokan kaikista .form-group elementeistä. Se poistaa myös kaikki .help-block elementit, joissa on virheilmoituksia.
Vaihe 5-Palvelinyhteysvirheiden Näyttäminen
jos palvelimeen on kytketty virhe, AJAX-puhelusta ei tule JSON-vastausta. Jos haluat estää käyttäjiä odottamasta vastausta, joka ei koskaan saavu, voit antaa virheilmoituksen yhteyden epäonnistumisesta.
palaa form.js ja lisää seuraavat korostetut koodirivit:
// ... $.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>' ); });// ...jos palvelin on jostain syystä rikki tai poikki, lomakkeen lähettämistä yrittävä käyttäjä saa virheilmoituksen:
nyt kun palvelimen virheilmoitus on valmis, olet täyttänyt esimerkkilomakkeen.
käyttäen $.post sijaan $.ajax
jQuery tarjoaa myös $.post pikakirjoitusmenetelmän vaihtoehtona $.ajax: lle.
$.ajax koodi form.js voitiin kirjoittaa uudelleen $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); $.post etuna on se, että se ei vaadi yhtä paljon yhteyskonfiguraatiota ilmoitettavaksi.
johtopäätös
tässä artikkelissa rakensit näytelomakkeen, joka kommunikoi jQueryn kanssa PHP-taustajärjestelmään ja näyttää lomakkeen mahdolliset virheet.
seuraavassa vaiheessa kannattaa tutkia monimutkaisempia varmennuksia, kuten voimassa olevia sähköpostiosoitteita ja päivämääriä. Saatat myös olla kiinnostunut käyttämään selaimessa toimivia asiakaspuolen validointeja.
jos haluat oppia lisää JavaScriptistä, tutustu JavaScript-aihesivullemme harjoituksiin ja ohjelmointiprojekteihin.