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 construir uma coleção de dados em JavaScript que pode ser enviada ao servidor usando “ XMLHttpRequest ” ou recuperado. Ele executa as mesmas funções que o elemento de formulário HTML. Pode ser comparado a um array de arrays. 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 = novo FormData ( ) ;
Exemplo 1: criar objeto FormData sem formulário HTML
Em primeiro lugar, inicialize uma constante com um nome específico e atribua um valor específico a essa constante. Aqui o ' new FormData() ” é utilizado como um valor constante:
Const formData = novo FormData ( ) ;
Em seguida, anexe os dados passando os argumentos no “ acrescentar() ” método
formData. acrescentar ( 'Nome' , 'Policial' ) ;formData. acrescentar ( 'Nome' , 'Javed' ) ;
formData. acrescentar ( 'idade' , 25 ) ;
Depois disso, utilize o “ console.log() ” método:
console. registro ( 'Informações do formulário' ) ;
Use o ' para ” loop para iterar e exibir a saída no console com a ajuda do “ console.log() ” método:
para ( deixe obj de formData ) {console. registro ( obj ) ;
}
Exemplo 2: criar objeto FormData com um formulário HTML
Para adicionar o FormData com um formulário HTML, primeiro crie um formulário em HTML com a ajuda do “
- Para adicionar o campo de entrada no formulário, use o botão “
' elemento. - Dentro da tag de entrada, especifique o “ tipo ” para definir o tipo de dados do elemento. Existem vários valores possíveis para esse atributo, incluindo “ texto ”, “ número ”, “ data ”, “ senha ', e muitos mais.
- O ' espaço reservado ” é usado para adicionar o valor a ser exibido no campo de entrada e “nome” refere-se ao nome do campo de entrada.
- “ ao clicar ” é acionado quando o usuário executa uma funcionalidade clicando no mouse:
< tipo de entrada = 'texto' nome = 'Nome' espaço reservado = 'Digite seu primeiro nome' >< br >< br >
< tipo de entrada = 'texto' nome = 'Lnome' espaço reservado = 'Digite seu sobrenome' >< br >< br >
< tipo de entrada = 'data' nome = 'idade' espaço reservado = 'Digite sua idade' >< br >< br >
< tipo de entrada = 'botão' valor = 'Digitar' ao clicar = 'dados()' >
forma >
Em seguida, acesse o formulário em CSS e defina o espaço ao redor do formulário:
. forma {margem : 20px ;
preenchimento : 30px ;
}
Além disso, utilize a tag script e adicione o seguinte código:
dados da função ( ) {era forma = documento. getElementById ( 'forma' ) ;
constformData = newFormData ( forma ) ;
console. registro ( 'Dados do formulário' ) ;
para ( deixe obj offormData ) {
console. registro ( obj ) ;
}
}
No trecho de código acima:
- Invoque o “ getElementById(“formulário”) ” para acessar o formulário utilizando o id do formulário.
- Agora, armazene o elemento acessado em uma nova constante “ formData ”.
- Use o ' para ” 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 construir uma coleção de dados em JavaScript que pode ser enviada ao servidor. Para criar o objeto Formdata em JavaScript, dois métodos são demonstrados. A primeira é usando JavaScript simples e a segunda é através da criação de formulários em HTML e vinculando-os com JavaScript. Este post afirmou sobre objetos FormData em JavaScript.