O que é um objeto formData em JavaScript?

Objetos formDados são usados ​​para capturar o formulário ao enviar um formulário recuperando -o com outro método. Para adicionar campos aos métodos, podemos construir um formulário html novo ou mais recente ou mais recente ou fazer um objeto sem utilizar nenhum formulário. Os dados nos campos de texto devem ser fornecidos quando o botão de envio for clicado e o JavaScript deve identificá -los e entregar esses valores variáveis.

Este artigo demonstrará o objeto FormData em JavaScript com a ajuda dos exemplos mais fáceis.

O que é um objeto formData em JavaScript?

Um objeto FormData é uma abordagem popular para criar uma coleta de dados em JavaScript que pode ser enviada ao servidor usando “XmlHttPrequestOu recuperado. Ele executa as mesmas funções que o elemento de forma html. Pode ser comparado a uma variedade de matrizes. Uma matriz separada representa cada elemento que desejamos transmitir ao servidor.

Sintaxe

Para usar o objeto FormData em JavaScript, utilize a seguinte sintaxe:

const formData = new FormData ();

Exemplo 1: Crie objeto FormData sem forma HTML

Primeiro de tudo, inicialize uma constante com um nome específico e atribua um valor específico a essa constante. Aqui o "novo formData ()”É utilizado como um valor constante:

Const formData = new FormData ();

Em seguida, anexe os dados passando os argumentos no “acrescentar()”Método

FormData.anexar ('fname', 'hafsa');
FormData.anexar ('lname', 'javed');
FormData.anexar ('idade', 25);

Depois disso, utilize o “console.registro()”Método:

console.log ("Informações do formulário");

Use o "para”Faça um loop para iterar e exibir a saída no console com a ajuda do“console.registro()”Método:

para (Let OBJ of FormData)
console.log (obj);

Exemplo 2: Crie objeto FormData com um formulário HTML

Para adicionar o FormData com uma forma HTML, primeiro, crie um formulário em HTML com a ajuda do “”Elemento e adicione o seguinte atributo listado abaixo:

• Para adicionar o campo de entrada no formulário, use o “" elemento.
• Dentro da tag de entrada, especifique o “tipo”Atributo para definir o tipo de dados do elemento. Existem vários valores possíveis para este atributo, incluindo “texto","número","data","senha", e muitos mais.
• O "espaço reservado”É usado para adicionar o valor para exibir no campo de entrada e“ nome ”refere -se ao nome do campo de entrada.
• ““ONCLICK”O evento é acionado quando o usuário executa uma funcionalidade clicando no mouse:

Em seguida, acesse o formulário em CSS e defina o espaço em torno do formulário:

.forma
margem: 20px;
preenchimento: 30px;

Além disso, utilize a etiqueta do script e adicione o seguinte código:

functionData ()
var form = documento.getElementById ("forma");
constFormData = newformData (form);
console.log ("dados de formulário");
para (deixe obj offormdata)
console.log (obj);

No trecho de código acima:

• Invoque o “getElementById ("forma")”Método para acessar o formulário utilizando o ID do formulário.
• Agora, armazene o elemento acessado em uma nova constante “FormData”.
• Use o "para”Faça um loop para iteração e imprima os elementos no console.

Saída

Você aprendeu sobre a criação do objeto FormData em JavaScript.

Conclusão

Um objeto FormData é usado para criar uma coleção de dados em JavaScript que pode ser enviado ao servidor. Para criar o objeto FormData em JavaScript, dois métodos são demonstrados. O primeiro é usar JavaScript simples e o segundo é através da criação de formulários em HTML e vinculando -o com JavaScript. Esta posta.