0Pricing
jQuery Academy · Lezione

Invio dei moduli tramite AJAX e feedback

Padroneggiare l'invio asincrono dei dati dei moduli tramite AJAX, fornire feedback in tempo reale all'utente e gestire le risposte del server senza ricaricare interamente la pagina, per un'esperienza più fluida.

Invio dei moduli tramite AJAX e feedback è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Moduli fluidi con AJAX

Immagini di poter inviare un modulo senza ricaricare l'intera pagina! Questa è la magia dell'invio dei moduli tramite AJAX.

Invece di aggiornare completamente la pagina, AJAX consente di inviare i dati del modulo a un server in background. Ne risulta un'esperienza utente molto più fluida e rapida, perfetta per commenti, registrazioni o aggiornamenti veloci.

Impedire l'invio predefinito

Il primo passaggio per inviare un modulo tramite AJAX consiste nell'impedire il comportamento predefinito del browser. In caso contrario, la pagina verrebbe ricaricata normalmente, vanificando lo scopo di AJAX!

Per farlo, chiamiamo event.preventDefault() all'interno del gestore dell'evento submit del modulo.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

Preparare i dati del modulo

Prima di inviare i dati del modulo tramite AJAX, è necessario prepararli nel formato corretto. Il metodo .serialize() di jQuery è perfetto a questo scopo!

  • Raccoglie automaticamente i valori di tutti gli elementi input, select e textarea presenti nel modulo.
  • Li codifica in una stringa codificata per URL (ad esempio, name=Alice&email=alice%40example.com).
  • Questa stringa è il formato standard per inviare i dati di un modulo a un server.
<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

Inviare la richiesta AJAX

Dopo aver serializzato i dati del modulo, possiamo inviarli al server. jQuery offre diversi metodi AJAX, ma $.post() è una comoda scorciatoia per inviare dati usando il metodo HTTP POST.

Richiede l'URL del server, i dati serializzati e una funzione di callback facoltativa da eseguire in caso di successo.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

Mostrare un feedback durante il caricamento

Quando un utente fa clic su Invia, si aspetta una risposta immediata. Poiché le richieste AJAX sono asincrone, si verifica un ritardo. Fornire un feedback visivo è fondamentale!

È possibile mostrare il messaggio "Caricamento..." o uno spinner mentre la richiesta è in corso e nasconderlo quando arriva la risposta.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

Gestire le risposte positive

Quando il server elabora correttamente i dati del modulo, di solito invia una risposta. Potrebbe trattarsi di un messaggio di conferma, dell'ID di un record appena creato o di dati aggiornati.

La funzione di callback per il successo (il terzo argomento di $.post()) riceve questi dati e consente di aggiornare di conseguenza l'interfaccia utente.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

Gestire gli errori in modo appropriato

Non tutte le richieste vanno a buon fine. Problemi di rete, errori del server o dati non validi possono causare il fallimento di una richiesta AJAX. È fondamentale gestire questi errori in modo appropriato e informare l'utente.

Per $.post(), è possibile concatenare un metodo .fail(). Per $.ajax(), è possibile usare la callback error oppure il metodo .fail() sull'oggetto Deferred restituito.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

Svuotare i moduli dopo l'invio

Dopo l'invio corretto di un modulo, una buona esperienza utente prevede lo svuotamento dei campi di input. In questo modo si evitano invii accidentali duplicati e si prepara il modulo per l'azione successiva.

È possibile usare il metodo nativo del DOM .reset() sull'elemento form oppure svuotare manualmente i singoli valori di input.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

Esempio completo di modulo AJAX

Uniamo tutte le tecniche apprese: impedire l'invio predefinito, serializzare i dati, inviare la richiesta AJAX, mostrare un feedback durante il caricamento, gestire le risposte positive e negative e infine svuotare il modulo.

Questo approccio completo garantisce un'esperienza con i moduli AJAX solida e intuitiva.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

Verifichi la Sua comprensione

Ha imparato a inviare moduli con AJAX fornendo un feedback in tempo reale. Mettiamo alla prova le Sue conoscenze!

Riepilogo: invio fluido dei moduli

Congratulazioni! Ha imparato a padroneggiare l'invio dei moduli tramite AJAX, migliorando le Sue applicazioni web con esperienze utente fluide e non invasive.

  • Ha imparato a impedire il comportamento predefinito del browser con event.preventDefault().
  • Ha usato .serialize() per preparare facilmente i dati del modulo alla trasmissione.
  • Ha implementato $.post() o $.ajax() per inviare i dati in modo asincrono.
  • Ha aggiunto un feedback utente essenziale e in tempo reale per gli stati di caricamento, successo ed errore.
  • Infine, ha imparato a svuotare i moduli dopo l'invio per ottenere un'interfaccia pulita.

Queste competenze sono essenziali per creare moduli web moderni e reattivi!

Domande Frequenti

La lezione «Invio dei moduli tramite AJAX e feedback» è gratuita?

Sì — il testo completo di «Invio dei moduli tramite AJAX e feedback» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Invio dei moduli tramite AJAX e feedback»?

Padroneggiare l'invio asincrono dei dati dei moduli tramite AJAX, fornire feedback in tempo reale all'utente e gestire le risposte del server senza ricaricare interamente la pagina, per un'esperienza… Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.

Quanto tempo richiede la lezione «Invio dei moduli tramite AJAX e feedback»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Manipolazione dinamica dei campi dei moduli
  2. Logica di validazione dei moduli lato client
  3. Invio dei moduli tramite AJAX e feedback
← Torna a jQuery Academy