cum să trimiteți formulare AJAX cu JQuery

cum să trimiteți formulare AJAX cu JQuery

Introducere

jQuery poate fi asociat cu depunerea Formularului pentru a gestiona validarea. Acest lucru are avantajul de a oferi utilizatorilor feedback cu privire la orice erori în introducerea lor.

gif animat care descrie un utilizator completând intrări într-un formular și primind un mesaj de succes.

în acest tutorial, vi se va prezenta un formular de probă care comunică unui backend PHP. Formularul va folosi jQuery pentru a procesa un formular fără o reîmprospătare a paginii (folosind AJAX), va indica eventualele erori și va afișa, de asemenea, un mesaj de succes.

cerințe preliminare

pentru a finaliza acest tutorial, veți avea nevoie de:

  • acest tutorial presupune că aveți PHP instalat local și puteți rula serverul web încorporat. Este posibil să puteți consulta unul dintre tutorialele noastre pentru instalarea PHP în mediul dvs.
  • unele familiaritate cu selectori și metode din biblioteca jQuery.
  • unele familiaritate cu clasele din biblioteca Bootstrap.
  • un editor de cod.
  • un browser web modern.

Notă: Acest tutorial nu specifică cele mai recente versiuni ale jQuery (în prezent 3.5.1) sau Bootstrap (în prezent 5.0.0-beta1). Cu toate acestea, multe dintre lecțiile din acest tutorial se referă încă la cele mai recente versiuni.

acest tutorial a fost verificat cu PHP V7.3.24, jQuery v2.0.3, și Bootstrap v3.0.3.

Pasul 1-Construirea Backend-ului cu PHP

în scopul acestui tutorial, backend-ul va fi scris în PHP.

mai întâi, deschideți o fereastră terminal și creați un nou director de proiect:

  • mkdir jquery-form-validation

navigați la acest nou director de proiect:

  • cd jquery-form-validation

apoi, utilizați editorul de cod pentru a crea un nou fișier process.php:

proces.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);

acest fișier va lua valori pentru name, emailși superheroAlias. Dacă oricare dintre aceste valori nu sunt furnizate, un mesaj de eroare va fi trimis înapoi. Multe alte validări ar putea fi efectuate în acest moment, dar în sensul acestui tutorial, veți asigura doar că aceste intrări necesare au fost furnizate. În caz contrar, dacă o valoare pentru name, email și superheroAlias sunt prezente, un mesaj de succes va fi trimis înapoi.

notă: Într-un scenariu din lumea reală, backend-ul ar fi, de asemenea, responsabil pentru alte sarcini, cum ar fi preluarea datelor și salvarea modificărilor într-o bază de date, Crearea unei sesiuni sau trimiterea unui e-mail.

acum că ați finalizat procesarea formularului, puteți crea formularul.

Pasul 2-Construirea Frontend cu HTML și CSS

în scopul acestui tutorial, Bootstrap va fi folosit pentru a construi punctele de vedere.

în directorul de proiect, utilizați editorul de cod pentru a crea un fișier index.html:

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>

se va face referire la versiunea CDN (content delivery network) a Bootstrap și jQuery. Formularul action va fi setat la fișierul PHP care a fost creat mai devreme. Formularul va consta din câmpuri pentru name, emailși superheroAlias. Formularul va avea nevoie și de un buton de trimitere.

deschideți o fereastră terminal și navigați la directorul de proiect. Și rulați serverul PHP:

  • php -S localhost:8000

vizitați localhost:8000 în browserul dvs. web și respectați următoarele:

captură de ecran a unui formular cu câmpuri pentru Nume, e-mail și Alias super-erou.

acum că aveți formularul completat, puteți crea scriptul pentru a gestiona depunerea Formularului.

Pasul 3-Manipularea formular trimite logica în JavaScript și jQuery

pentru a trimite un formular prin AJAX, script-ul va trebui să se ocupe de patru sarcini:

  • capturați butonul de trimitere a formularului, astfel încât acțiunea implicită să nu aibă loc.
  • obțineți toate datele din formular folosind jQuery.
  • trimiteți datele formularului folosind AJAX.
  • afișează erori dacă există.

în directorul de proiect, utilizați editorul de cod pentru a crea un nou fișierform.js:

formular.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(); });});

acest cod preia datele din câmpurile name, email și superheroAlias. Apoi efectuează o cerere AJAX la process.php cu o sarcină utilă de date de formular. După o conexiune reușită, consola va înregistra datele de răspuns. event.preventDefault() este utilizat pentru a împiedica comportamentul implicit al formularului prin reîncărcarea paginii la trimitere.

după salvarea modificărilor în form.js, revizitați fișierul index.html cu editorul de cod. Adăugați o referință la noul fișier JavaScript:

index.html
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->

acum, când un utilizator apasă butonul Submit din formular, codul JavaScript va prelua toate valorile de intrare și va trimite o solicitare POST la process.php.

Notă: veți utiliza apelul invers .done pentru a gestiona o solicitare AJAX de succes. Acest lucru a fost numit .success, dar de atunci a fost depreciat în jQuery 1.8+.

o altă alternativă este să folosiți serialize în loc să trageți informațiile formularului individual.

scriptul PHP va procesa intrările trimise de apelul AJAX și va returna matricea $data creată. Puteți observa acest lucru în consola browserului dvs. după ce trimiteți formularul:

captură de ecran a consolei web DevTools din browser care afișează datele returnate la trimiterea unui formular-succes: adevărat, mesaj: succes!

acum că ați completat logica formularului, puteți crea scriptul pentru a gestiona erorile de formular.

Step 4-afișarea erorilor de validare a formularului

în scriptul PHP, codul verifică pentru a se asigura că toate câmpurile sunt necesare. Dacă un câmp nu este prezent, o eroare este trimisă înapoi.

revedeți form.jsși adăugați următoarele linii de cod evidențiate:

formular.js 
// ... $.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(); });// ...

acest cod verifică dacă Răspunsul conține o eroare pentru fiecare câmp. Dacă este prezentă o eroare, aceasta adaugă o clasă has-error și adaugă mesajul de eroare.

acum, revedeți formularul într-un browser web și experimentați trimiterea datelor cu formularul.

dacă există erori care vin înapoi de la server, formularul va oferi feedback cu privire la orice câmpuri obligatorii:

captură de ecran a formularului de exemplu care prezintă erori pentru câmpurile de introducere a numelui, e-mailului și aliasului super-eroului.

și dacă nu există erori care vin înapoi de la server, formularul va oferi feedback pentru o depunere de succes:

captură de ecran a formularului de exemplu care prezintă un mesaj de succes.

de fiecare dată când trimitem formularul, erorile noastre din trimiterea noastră anterioară sunt încă acolo. Va trebui să le ștergeți eliminându-le imediat ce formularul este trimis din nou.

revedeți form.js și adăugați următoarele linii de cod evidențiate:

formular.js 
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...

acest cod va elimina clasa has-error din toate elementele .form-group. De asemenea, va elimina toate elementele .help-block cu mesaje de eroare.

Pasul 5-afișarea erorilor de conectare la Server

dacă există o eroare la conectarea la server, nu va exista niciun răspuns JSON de la apelul AJAX. Pentru a împiedica utilizatorii să aștepte un răspuns care nu va ajunge niciodată, puteți furniza un mesaj de eroare pentru eșecurile conexiunii.

revedeți form.jsși adăugați următoarele linii de cod evidențiate:

formular.js 
// ... $.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>' ); });// ...

în cazul în care serverul este rupt sau în jos pentru orice motiv, un utilizator care încearcă să prezinte un formular va primi un mesaj de eroare:

captură de ecran a formularului de exemplu care prezintă un mesaj de eroare de a nu putea ajunge la server.

acum că aveți mesajul de eroare server complet, ați completat formularul de exemplu.

folosind $.postați în loc de $.ajax

jQuery oferă, de asemenea, o metodă de stenografie $.post ca alternativă la $.ajax.

codul $.ajax din form.js ar putea fi rescris cu $.post:

$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here });

avantajul $.post este că nu necesită atât de multă configurație de conexiune pentru a fi declarată.

concluzie

în acest articol, ați construit un formular eșantion care comunică unui backend PHP cu jQuery și afișează orice erori în formular.

ca pas următor, veți dori să explorați validări mai complexe, cum ar fi adrese de e-mail valide și date. Ați putea fi, de asemenea, interesat să aplicați validări din partea clientului care funcționează în browser.

dacă doriți să aflați mai multe despre JavaScript, consultați pagina noastră de subiecte JavaScript pentru exerciții și proiecte de programare.

Leave a Reply

Adresa ta de email nu va fi publicată.