0Pricing
jQuery Academy · Aula

Envio e Feedback de Formulários via AJAX

Domine o envio assíncrono de dados de formulários via AJAX, forneça feedback em tempo real aos usuários e trate as respostas do servidor sem recarregar a página inteira, para uma experiência mais fluida.

Envio e Feedback de Formulários via AJAX é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Formulários fluidos com AJAX

Imagine enviar um formulário sem recarregar a página inteira! Essa é a magia do envio de formulários com AJAX.

Em vez de atualizar a página inteira, o AJAX permite enviar dados do formulário para um servidor em segundo plano. Isso proporciona uma experiência muito mais fluida e rápida, ideal para comentários, cadastros ou atualizações rápidas.

Impedindo o envio padrão

A primeira etapa do envio de um formulário com AJAX é impedir o comportamento padrão do navegador. Se você não fizer isso, a página será recarregada normalmente, anulando o propósito do AJAX!

Conseguimos isso chamando event.preventDefault() dentro do manipulador de envio do formulário.

<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>

Preparando os dados do formulário

Antes de enviar os dados do formulário por AJAX, precisamos formatá-los corretamente. O método .serialize() do jQuery é perfeito para isso!

  • Ele coleta automaticamente os valores de todos os elementos input, select e textarea dentro do formulário.
  • Ele os codifica em uma cadeia de caracteres codificada para URL, por exemplo, name=Alice&email=alice%40example.com.
  • Essa cadeia de caracteres é o formato padrão para enviar dados de formulários a um servidor.
<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>

Enviando a solicitação AJAX

Com os dados do formulário serializados, agora podemos enviá-los ao servidor. O jQuery oferece vários métodos AJAX, mas $.post() é um atalho conveniente para enviar dados usando o método HTTP POST.

Ele recebe a URL do servidor, os dados serializados e uma função de retorno de chamada opcional para ser executada em caso de sucesso.

<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>

Exibindo feedback de carregamento

Quando um usuário clica em enviar, ele espera uma resposta imediata. Como as solicitações AJAX são assíncronas, há um atraso. Fornecer feedback visual é fundamental!

Você pode exibir uma mensagem "Carregando..." ou um indicador de carregamento enquanto a solicitação está em andamento e ocultá-la quando a resposta chegar.

<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>

Processando respostas de sucesso

Depois que o servidor processa os dados do formulário com sucesso, geralmente envia uma resposta. Ela pode ser uma mensagem de confirmação, o ID de um registro recém-criado ou dados atualizados.

A função de retorno de chamada de sucesso, o terceiro argumento de $.post(), recebe esses dados, permitindo que você atualize a interface de acordo.

<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>

Tratamento adequado de erros

Nem todas as solicitações são bem-sucedidas. Problemas de rede, erros do servidor ou dados inválidos podem fazer uma solicitação AJAX falhar. É essencial tratar esses erros adequadamente e informar o usuário.

Com $.post(), você pode encadear um método .fail(). Com $.ajax(), pode usar o retorno de chamada error ou o método .fail() no objeto Deferred retornado.

<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>

Limpando formulários após o envio

Depois de enviar um formulário com sucesso, é uma boa experiência para o usuário limpar os campos de entrada. Isso evita reenvios acidentais e deixa tudo pronto para a próxima ação.

Você pode usar o método nativo do DOM .reset() no elemento do formulário ou limpar manualmente os valores individuais dos campos.

<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>

Exemplo completo de formulário AJAX

Vamos combinar todas as técnicas que aprendemos: impedir o envio padrão, serializar os dados, enviar a solicitação AJAX, exibir feedback de carregamento, tratar respostas de sucesso e falha e, por fim, limpar o formulário.

Essa abordagem abrangente garante uma experiência robusta e fácil de usar com formulários AJAX.

<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>

Verifique sua compreensão

Você aprendeu a enviar formulários com AJAX, fornecendo feedback em tempo real. Vamos testar seus conhecimentos!

Recapitulação: envios de formulário fluidos

Parabéns! Você dominou o envio de formulários com AJAX, aprimorando suas aplicações web com experiências de usuário fluidas e sem interrupções.

  • Você aprendeu a impedir o comportamento padrão dos formulários com event.preventDefault().
  • Você usou .serialize() para preparar facilmente os dados do formulário para transmissão.
  • Você implementou $.post() ou $.ajax() para enviar dados de forma assíncrona.
  • Você adicionou feedback essencial em tempo real para os estados de carregamento, sucesso e erro.
  • Por fim, aprendeu a limpar os formulários após o envio para manter uma interface organizada.

Essas habilidades são essenciais para criar formulários web modernos e responsivos!

Perguntas Frequentes

A aula “Envio e Feedback de Formulários via AJAX” é grátis?

Sim — o texto completo de “Envio e Feedback de Formulários via AJAX” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Envio e Feedback de Formulários via AJAX”?

Domine o envio assíncrono de dados de formulários via AJAX, forneça feedback em tempo real aos usuários e trate as respostas do servidor sem recarregar a página inteira, para uma experiência mais flu… Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.

Quanto tempo leva a aula “Envio e Feedback de Formulários via AJAX”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Manipulação Dinâmica de Campos de Formulário
  2. Lógica de Validação de Formulários no Cliente
  3. Envio e Feedback de Formulários via AJAX
← Voltar para jQuery Academy