19.11.2024

Sem Redirecionamento: Enviando Formulários HTML com jQuery/JavaScript

Resposta Rápida

Para enviar um formulário HTML sem redirecionar a página, você pode usar AJAX e a API fetch no JavaScript. A API fetch embutida é usada para interceptar o evento de envio e transmitir os dados do formulário. Vamos observar um exemplo de código:

document.querySelector('form').onsubmit = event => {
  event.preventDefault(); // Impede o comportamento padrão
  fetch(event.target.action, {
    method: 'POST', // Usa o método POST
    body: new FormData(event.target) // Coleta os dados do formulário
  })
  .then(response => response.json())
  .then(data => console.log('Sucesso:', data)) // Manipula a resposta
  .catch(error => console.error('Erro:', error)); // Trata possíveis erros
};

Essa abordagem permite que você realize requisições POST assíncronas, mantendo o usuário na página atual.

Soluções Práticas e Alternativas Úteis

A API fetch fornece uma maneira moderna e conveniente de enviar formulários sem redirecionamento da página. Vamos explorar outros métodos em JavaScript e discutir potenciais problemas que você pode encontrar.

Solução Usando iframe

Ao definir o atributo target do seu formulário para o nome de um iframe invisível, você pode enviar dados para o iframe, o que evita o redirecionamento da página:

<iframe name="hiddenFrame" style="display:none;"></iframe>
<form action="/submit-form" method="post" target="hiddenFrame">
  <!-- Elementos do formulário -->
</form>

Enviando Formulários com jQuery Ajax

O envio de formulários usando jQuery pode ser feito de forma simples com o método .ajax():

$('form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      alert('Formulário enviado com sucesso!');
    }
  });
});

Trabalhando com FormData e XMLHttpRequest

Usar FormData em conjunto com XMLHttpRequest permite controle total sobre o processo de envio:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function () {
  alert('Formulário enviado com sucesso!');
};
var formData = new FormData(document.querySelector('form'));
xhr.send(formData);

Gerenciando Atributos do Formulário Dinamicamente

Ao implementar o envio de múltiplos formulários via AJAX, gerenciar dinamicamente os atributos do formulário pode ser muito útil:

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  var form = $(this).closest('form');
  var actionUrl = form.attr('action');
  // Trabalhe mais com AJAX e use `actionUrl`
});

Importância da Segurança do Formulário

Sempre use o atributo method="post" para transmissão de dados segura, especialmente ao lidar com informações sensíveis.

Visualização

O tradicional envio de formulário HTML é como lançar um avião de papel:

Normalmente, após lançar o avião, você corre atrás dele.

Mas usar XMLHttpRequest ou fetch muda a situação:

1. Você lança o avião e continua parado, observando seu voo sem redirecionar para outra página.

Vamos nos aprofundar:

Sem redirecionamento: [🧍] envia [✈️], fica [🏖️]
Com redirecionamento: [🧍] segue [✈️], chega [🚀]

Permaneça no lugar. Deixe o formulário ir — permita que ele "vôe" sozinho!

Problemas Comuns e Soluções

Enviar formulários sem redirecionamento de página pode parecer simples até que você encontre problemas. No entanto, há soluções para tudo.

Informando o Usuário Sobre o Status da Submissão

Após a submissão, é essencial transmitir mudanças de status para o usuário. Você pode utilizar funções de callback no AJAX ou o método .then() no fetch. Isso permite a implementação de um sistema de notificações e atualizações na interface.

Validação do Formulário

A validação do formulário do lado do cliente antes da submissão é um passo obrigatório. Você pode verificar cada campo individualmente ou usar bibliotecas como Formik no React para gerenciar o processo de validação.

Dependência do JavaScript

Tenha em mente que o método descrito acima depende de um JavaScript ativo no navegador do usuário. Como um plano alternativo, garanta que um mecanismo de envio padrão do formulário esteja em funcionamento.

Compatibilidade Entre Navegadores

Você precisa garantir que seu método de envio de formulários seja suportado em vários navegadores, incluindo versões mais antigas.

Melhores Práticas e Considerações Finais

• Escolha um conjunto de ferramentas que você considere confortável: jQuery para desenvolvimento simplificado ou JS puro para trabalho sem dependências.
• Oculte o iframe da melhor forma possível, para que sua exibição não afete a aparência da página após a submissão.
• Use URLs confiáveis para a ação do formulário.
• Prefira um JavaScript não intrusivo para a vinculação de eventos, a fim de evitar "desordem" desnecessária no HTML.

Recursos Úteis

1. Introdução ao AJAX — Aprenda como usar o AJAX de forma eficaz para enviar formulários sem redirecionamento de página.
2. Fetch API - Web API | MDN — Usando a API Fetch para envio assíncrono de formulários.
3. Visão Geral | Formik — Uma visão geral da biblioteca Formik para gerenciar formulários no React.
4. GitHub - axios/axios: Cliente HTTP baseado em promises para o navegador e node.js — Axios para o envio de requisições HTTP em aplicações JavaScript.
5. Evento: método preventDefault() - Web API | MDN — Como usar preventDefault para evitar o redirecionamento da página.
6. FormData - Web API | MDN — O objeto FormData para criar e enviar dados de formulários.

Video

Navigation