Como usar o FormData em JavaScript para manipular formulários
Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formulários de maneira eficiente.
Publicado em 8 de agosto de 2023
Glossário
O que é FormData em JavaScript?
O FormData é uma interface fornecida pelo JavaScript que permite a criação e manipulação de objetos que representam dados de formulários HTML. Com o FormData, é possível coletar os valores dos campos de um formulário e enviá-los para o servidor de forma fácil e eficiente.
Como usar o FormData em JavaScript para enviar dados de formulários?
Para utilizar o FormData em JavaScript e enviar os dados de um formulário para o servidor, siga as etapas abaixo:
- Crie um objeto FormData vazio utilizando a palavra-chave
new. - Adicione os campos do formulário ao objeto FormData utilizando o método
append(). O primeiro argumento deve ser o nome do campo e o segundo argumento o valor que deseja atribuir a ele. - Envie os dados do formulário para o servidor utilizando uma requisição AJAX ou o método
fetch(). Certifique-se de definir o método HTTP como “POST” e o corpo da requisição como o objeto FormData. - Substitua “url-do-servidor” pela URL real onde os dados do formulário serão processados. Certifique-se também de tratar as respostas e possíveis erros retornados pela requisição.
const formulario = new FormData();
formulario.append("nome", "João Silva");
formulario.append("email", "[email protected]");
formulario.append("mensagem", "Olá, gostaria de mais informações sobre o produto.");
fetch("url-do-servidor", {
method: "POST",
body: formulario
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
Como usar o FormData em JavaScript para recuperar dados de formulários?
Além de ser útil para enviar dados de formulários para o servidor, o FormData também pode ser utilizado para recuperar os dados de formulários preenchidos pelo usuário. Para isso, basta criar um objeto FormData a partir do elemento do formulário e acessar os valores dos campos através do método get().
Vamos considerar o exemplo de um formulário com os campos nome, email e mensagem:
<form id="meu-formulario">
<input type="text" name="nome" value="João Silva">
<input type="email" name="email" value="[email protected]">
<textarea name="mensagem">Olá, gostaria de mais informações sobre o produto.</textarea>
<button type="submit">Enviar</button>
</form>
No JavaScript, podemos recuperar os valores dos campos do formulário da seguinte maneira:
const formulario = document.getElementById("meu-formulario");
const formData = new FormData(formulario);
const nome = formData.get("nome");
const email = formData.get("email");
const mensagem = formData.get("mensagem");
console.log(nome, email, mensagem);
No exemplo acima, utilizamos o método get() do objeto FormData para recuperar os valores dos campos do formulário pelo seu nome. Esses valores podem ser então utilizados para realizar alguma ação, como fazer uma requisição AJAX ou validações no próprio navegador.
Como usar o FormData em JavaScript para manipular formulários de maneira assíncrona?
O FormData em JavaScript também pode ser utilizado para realizar manipulações em formulários de maneira assíncrona, sem a necessidade de recarregar a página inteira. Isso é possível utilizando requisições AJAX ou o método fetch().
Para manipular formulários de forma assíncrona, podemos adicionar um ouvinte de eventos ao formulário para capturar o evento de envio (submit). Dessa forma, podemos interceptar o envio do formulário padrão e realizar a manipulação dos dados utilizando o FormData.
Vamos considerar o exemplo de um formulário que precisa ser enviado assincronamente para o servidor ao ser submetido:
<form id="meu-formulario">
<input type="text" name="nome">
<input type="email" name="email">
<textarea name="mensagem"></textarea>
<button type="submit">Enviar</button>
</form>
No JavaScript, podemos adicionar um ouvinte de eventos ao formulário e utilizar o FormData para enviar os dados de forma assíncrona:
const formulario = document.getElementById("meu-formulario");
formulario.addEventListener("submit", function(event) {
event.preventDefault(); // Evita a submissão do formulário padrão
const formData = new FormData(formulario);
fetch("url-do-servidor", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
});
No exemplo acima, adicionamos um ouvinte de eventos ao formulário que captura o evento de envio (submit). Utilizamos o método preventDefault() para evitar que o formulário seja enviado da maneira padrão.
Em seguida, criamos um objeto FormData a partir do formulário e, utilizando o método fetch(), enviando os dados do formulário para o servidor de forma assíncrona. Novamente, certifique-se de substituir a “url-do-servidor” pela URL real onde os dados serão processados. Lembre-se também de tratar as respostas e possíveis erros retornados pela requisição.
O FormData é uma ferramenta poderosa do JavaScript que permite a manipulação e envio de dados de formulários de maneira fácil e eficiente. Com o FormData, podemos enviar e receber dados de formulários de forma síncrona ou assíncrona, além de lidar com o envio de arquivos.
Ao utilizar o FormData em JavaScript, podemos criar aplicações web mais interativas e responsivas, melhorando a experiência do usuário. Através do uso de requisições AJAX ou do método fetch(), podemos enviar os dados capturados pelo FormData para o servidor de forma ágil e realizar as ações necessárias com esses dados.
Em resumo, saber como usar o FormData em JavaScript para manipular formulários é essencial para desenvolvedores web que desejam criar aplicações dinâmicas e eficientes. Com o FormData, podemos simplificar o processo de envio e recuperação de dados de formulários, tornando nosso código mais limpo, organizado e otimizado.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
