Come inviare moduli AJAX con jQuery
Introduzione
jQuery può essere accoppiato con l’invio di moduli per gestire la convalida. Questo ha il vantaggio di fornire agli utenti un feedback su eventuali errori nel loro input.
In questo tutorial, ti verrà presentato un modulo di esempio che comunica a un backend PHP. Il modulo utilizzerà jQuery per elaborare un modulo senza un aggiornamento della pagina (utilizzando AJAX), indicare eventuali errori e visualizzare anche un messaggio di successo.
Prerequisiti
Per completare questo tutorial, è necessario:
- Questo tutorial presuppone che PHP sia installato localmente e sia in grado di eseguire il server Web integrato. Potresti essere in grado di consultare uno dei nostri tutorial per l’installazione di PHP nel tuo ambiente.
- Una certa familiarità con selettori e metodi dalla libreria jQuery.
- Una certa familiarità con le classi dalla libreria Bootstrap.
- Un editor di codice.
- Un moderno browser web.
Nota: Questo tutorial non specifica le ultime versioni di jQuery (attualmente 3.5.1) o Bootstrap (attualmente 5.0.0-beta1). Tuttavia, molte delle lezioni di questo tutorial riguardano ancora le versioni più recenti.
Questo tutorial è stato verificato con PHP v7.3.24, jQuery v2.0.3 e Bootstrap v3.0.3.
Passo 1 — Costruire il backend con PHP
Ai fini di questo tutorial, il backend sarà scritto in PHP.
In primo luogo, aprire una finestra di terminale e creare una nuova directory di progetto:
- mkdir jquery-form-validation
Vai a questa nuova directory del progetto:
- cd jquery-form-validation
Quindi, utilizzare l’editor di codice per creare un nuovo file process.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);Questo file prenderà i valori per name, email e superheroAlias. Se uno di questi valori non viene fornito, verrà inviato un messaggio di errore. Molte altre convalide potrebbero essere eseguite a questo punto, ma ai fini di questo tutorial, ti assicurerai solo che questi input richiesti siano stati forniti. In caso contrario, se è presente un valore per name, email e superheroAlias, verrà inviato un messaggio di successo.
Nota: In uno scenario reale, il back-end sarebbe anche responsabile di altre attività come prendere i dati e salvare le modifiche a un database, creare una sessione o inviare un’e-mail.
Dopo aver completato l’elaborazione del modulo, è possibile creare il modulo.
Passo 2 — Costruire il Frontend con HTML e CSS
Ai fini di questo tutorial, Bootstrap verrà utilizzato per costruire le viste.
Nella directory del progetto, utilizzare l’editor di codice per creare un file 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> Si farà riferimento alla versione CDN (content delivery network) di Bootstrap e jQuery. Il modulo action verrà impostato sul file PHP creato in precedenza. Il modulo sarà composto da campi per name, emaile superheroAlias. Il modulo avrà anche bisogno di un pulsante di invio.
Aprire una finestra di terminale e accedere alla directory del progetto. Ed eseguire il server PHP:
- php -S localhost:8000
Visita localhost:8000 nel tuo browser web e osserva quanto segue:
Ora che il modulo è stato completato, è possibile creare lo script per gestire l’invio del modulo.
Passo 3-Gestione della logica di invio del modulo in JavaScript e jQuery
Per inviare un modulo tramite AJAX, lo script dovrà gestire quattro attività:
- Cattura il pulsante Invia modulo in modo che l’azione predefinita non abbia luogo.
- Ottieni tutti i dati dal modulo usando jQuery.
- Invia i dati del modulo utilizzando AJAX.
- Visualizzare gli errori se ce ne sono.
Nella directory del progetto, utilizzare l’editor di codice per creare un nuovo file form.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(); });}); Questo codice recupera i dati dai campi name, email e superheroAlias. Esegue quindi una richiesta AJAX a process.php con un carico utile di dati del modulo. Dopo una connessione riuscita, la console registrerà i dati di risposta. event.preventDefault() viene utilizzato per impedire che il modulo si comporti di default ricaricando la pagina all’invio.
Dopo aver salvato le modifiche a form.js, rivedere il file index.html con l’editor di codice. Aggiungere un riferimento al nuovo file JavaScript:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->Ora quando un utente preme il pulsante Invia sul modulo, il codice JavaScript recupererà tutti i valori di input e invierà una richiesta POST a process.php.
Nota: Si utilizzerà il callback .done per gestire una richiesta AJAX riuscita. Questo era chiamato .success, ma da allora è stato deprecato in jQuery 1.8+.
Un’altra alternativa è usare serialize invece di estrarre le informazioni del modulo individualmente.
Lo script PHP elaborerà gli input inviati dalla chiamata AJAX e restituirà l’array $data creato. È possibile osservare questo nella console del browser dopo aver inviato il modulo:
Ora che la logica del modulo è stata completata, è possibile creare lo script per gestire gli errori del modulo.
Passo 4 — Visualizzazione degli errori di convalida del modulo
Nello script PHP, il codice controlla che tutti i campi siano obbligatori. Se un campo non è presente, viene inviato un errore.
Rivisita form.js e aggiungi le seguenti righe di codice evidenziate:
// ... $.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(); });// ... Questo codice controlla se la risposta contiene un errore per ogni campo. Se è presente un errore, aggiunge una classe has-error e aggiunge il messaggio di errore.
Ora, rivisitare il modulo in un browser Web e sperimentare con l’invio di dati con il modulo.
Se ci sono errori che tornano dal server, il modulo fornirà un feedback su tutti i campi richiesti:
E se non ci sono errori che tornano dal server, il modulo fornirà un feedback per un invio di successo:
Ogni volta che inviamo il modulo, i nostri errori dal nostro precedente invio sono ancora lì. Sarà necessario eliminarli rimuovendoli non appena il modulo viene inviato di nuovo.
Rivisita form.js e aggiungi le seguenti righe di codice evidenziate:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ... Questo codice rimuoverà la classe has-error da tutti gli elementi .form-group. Rimuoverà anche tutti gli elementi .help-block con messaggi di errore.
Passo 5 — Visualizzazione degli errori di connessione al server
Se si verifica un errore di connessione al server, non ci sarà alcuna risposta JSON dalla chiamata AJAX. Per impedire agli utenti di attendere una risposta che non arriverà mai, è possibile fornire un messaggio di errore per errori di connessione.
Rivisita form.js e aggiungi le seguenti righe di codice evidenziate:
// ... $.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>' ); });// ...Se il server è rotto o inattivo per qualsiasi motivo, un utente che tenta di inviare un modulo riceverà un messaggio di errore:
Ora che il messaggio di errore del server è stato completato, è stato completato il modulo di esempio.
Utilizzando $.posta invece di $.ajax
jQuery fornisce anche un metodo stenografico $.post come alternativa a $.ajax.
Il codice $.ajax in form.js potrebbe essere riscritto con $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); Il vantaggio di $.post è che non richiede la stessa configurazione di connessione da dichiarare.
Conclusione
In questo articolo, è stato creato un modulo di esempio che comunica a un backend PHP con jQuery e visualizza eventuali errori nel modulo.
Come passo successivo, vorrai esplorare convalide più complesse come indirizzi e-mail e date valide. Potresti anche essere interessato ad applicare convalide lato client che funzionano nel browser.
Se vuoi saperne di più su JavaScript, consulta la nostra pagina argomento JavaScript per esercizi e progetti di programmazione.