Este artículo demostrará el objeto FormData en JavaScript con la ayuda de los ejemplos más sencillos.
¿Qué es un objeto FormData en JavaScript?
Un objeto FormData es un enfoque popular para construir una colección de datos en JavaScript que se puede enviar al servidor usando ' XMLHttpSolicitud ” o recuperado. Realiza las mismas funciones que el elemento de formulario HTML. Se puede comparar con una matriz 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:
constante formularioDatos = nuevo Formulario de datos ( ) ;
Ejemplo 1: crear un 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:
constante formularioDatos = nuevo Formulario de datos ( ) ;
A continuación, agregue los datos pasando los argumentos en el ' adjuntar() ' método
formularioDatos. adjuntar ( 'Fname' , 'Oficial' ) ;formularioDatos. adjuntar ( 'Lname' , 'Javed' ) ;
formularioDatos. adjuntar ( 'edad' , 25 ) ;
Después de eso, utilice el “ consola.log() ' método:
consola. registro ( 'Información del formulario' ) ;
Utilizar el ' para ” loop para iterar y mostrar la salida en la consola con la ayuda del “ consola.log() ' método:
para ( dejar obj de formData ) {consola. registro ( objeto ) ;
}
Ejemplo 2: crear un objeto FormData con un formulario HTML
Para agregar FormData con un formulario HTML, primero, cree un formulario en HTML con la ayuda de '
- 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. Hay varios valores posibles para este atributo, incluido ' texto ”, “ número ”, “ fecha ”, “ contraseña ', y muchos más.
- El ' marcador de posición ” se usa para agregar el valor que se mostrará en el campo de entrada, y “nombre” se refiere al nombre del campo de entrada.
- “ al hacer clic El evento se activa cuando el usuario realiza una funcionalidad haciendo clic en el mouse:
< tipo de entrada = 'texto' nombre = 'Fname' marcador de posición = 'Ponga su primer nombre' >< hermano >< hermano >
< tipo de entrada = 'texto' nombre = 'Nombre L' marcador de posición = 'Ingrese su apellido' >< hermano >< hermano >
< tipo de entrada = 'fecha' nombre = 'edad' marcador de posición = 'Introduzca su edad' >< hermano >< hermano >
< tipo de entrada = 'botón' valor = 'Ingresar' al hacer clic = 'datos()' >
forma >
A continuación, acceda al formulario en CSS y configure el espacio alrededor del formulario:
. forma {margen : 20 píxeles ;
relleno : 30 píxeles ;
}
Además, utilice la etiqueta del script y agregue el siguiente código:
datos de función ( ) {era forma = documento. getElementById ( 'forma' ) ;
constformData = newFormData ( forma ) ;
consola. registro ( 'Datos del formulario' ) ;
para ( dejar obj deformData ) {
consola. registro ( objeto ) ;
}
}
En el fragmento de código anterior:
- Invoca el “ getElementById(“formulario”) ” método para acceder al formulario utilizando la identificación del formulario.
- Ahora, almacene el elemento accedido en una nueva constante ' formularioDatos ”.
- Utilizar el ' para ” loop para la iteración e imprimir los elementos en la consola.
Producción
Ha aprendido sobre la creación del objeto FormData en JavaScript.
Conclusión
Un objeto FormData se usa para construir una colección de datos en JavaScript que se puede enviar al servidor. Para crear el objeto Formdata en JavaScript, se muestran dos métodos. El primero es usando JavaScript simple y el segundo es a través de la creación de formularios en HTML y vinculándolo con JavaScript. Esta publicación se refiere a los objetos FormData en JavaScript.