¿Qué es un objeto FormData en JavaScript??

¿Qué es un objeto FormData en JavaScript??
Los objetos de FormData se utilizan para capturar el formulario al enviar un formulario recuperándolo con otro método. Para agregar campos con métodos, podemos construir un formulario HTML de FormData nuevo o más reciente o hacer un objeto sin utilizar ningún formularios. Se deben proporcionar los datos en los campos de texto cuando se haga clic en el botón Enviar, y JavaScript debe identificarlos y entregar esos valores variables.

Esta redacción demostrará el objeto FormData en JavaScript con la ayuda de los ejemplos más fáciles.

¿Qué es un objeto FormData en JavaScript??

Un objeto FormData es un enfoque popular para construir una recopilación de datos en JavaScript que se puede enviar al servidor utilizando "Xmlhttprequest"O recuperado. Realiza las mismas funciones que el elemento de formulario HTML. Se puede comparar con una variedad de matrices. Una matriz separada representa cada elemento que deseamos transmitir al servidor.

Sintaxis

Para usar el objeto FormData en JavaScript, utilice la siguiente sintaxis:

const formData = new FormData ();

Ejemplo 1: Crear objeto FormData sin formulario HTML

En primer lugar, inicialice una constante con un nombre específico y asigne un valor particular a esa constante. Aquí el "Nuevo FormData ()"Se utiliza como un valor constante:

Const formData = new FormData ();

A continuación, agregue los datos aprobando los argumentos en el "adjuntar()" método

tonos.append ('fname', 'hafsa');
tonos.append ('lname', 'javed');
tonos.append ('edad', 25);

Después de eso, utilice el "consola.registro()" método:

consola.log ("información de formulario");

Utilizar el "paraBucle para iterar y mostrar la salida en la consola con la ayuda del "consola.registro()" método:

para (dejar obj de formdata)
consola.log (obj);

Ejemplo 2: Crear objeto FormData con un formulario HTML

Para agregar el FormData con un formulario HTML, primero, cree un formulario en HTML con la ayuda del "Elemento "y agregue el siguiente atributo enumerado a continuación:

  • Para agregar el campo de entrada en el formulario, use el "" elemento.
  • Dentro de la etiqueta de entrada, especifique el "tipo"Atributo para definir el tipo de datos del elemento. Existen múltiples valores posibles para este atributo, incluyendo "texto","número","fecha","contraseña", y muchos más.
  • El "marcador de posición"Se usa para agregar el valor para mostrar en el campo de entrada, y" nombre "se refiere al nombre del campo de entrada.
  • "al hacer clicEl evento se activa cuando el usuario realiza una funcionalidad haciendo clic en el mouse:











A continuación, acceda al formulario en CSS y establezca el espacio alrededor del formulario:

.forma
margen: 20px;
relleno: 30px;

Además, utilice la etiqueta de script y agregue el siguiente código:

functionData ()
Forma var = documento.getElementById ("formulario");
constformData = newFormData (form);
consola.log ("datos de formulario");
para (dejar obj oformdata)
consola.log (obj);

En el fragmento de código anterior:

  • Invoca el "GetElementById ("Formulario")Método para acceder al formulario utilizando la ID de formulario.
  • Ahora, almacene el elemento accedido en una nueva constante "tonos".
  • Utilizar el "para"Luce para la iteración e imprima los elementos en la consola.

Producción

Has aprendido sobre la creación del objeto FormData en JavaScript.

Conclusión

Se utiliza un objeto FormData para construir una recopilación de datos en JavaScript que se pueden enviar al servidor. Para crear el objeto FormData en JavaScript, se demuestran dos métodos. El primero es usar JavaScript simple y el segundo es a través de la creación de formularios en HTML y vincularlo con JavaScript. Esta publicación establece sobre los objetos de FormData en JavaScript.