javascript - tag - ¿Cómo inspeccionar FormData?
href with button tag (9)
console.log y lo repití usando for in .
Aquí está la referencia de MDN en FormData.
Ambos intentos están en este fiddle .
var fd = new FormData(),
key;
// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");
// does not do anything useful
console.log(fd);
// does not do anything useful
for(key in fd) {
console.log(key);
}
¿Cómo puedo inspeccionar los datos del formulario para ver qué teclas se han establecido?
Aquí hay una función para registrar las entradas de un objeto FormData a la consola como un objeto.
export const logFormData = (formData) => {
const entries = formData.entries();
const result = {};
let next;
let pair;
while ((next = entries.next()) && next.done === false) {
pair = next.value;
result[pair[0]] = pair[1];
}
console.log(result);
};
Cuando estoy trabajando en Angular 5+ (con TypeScript 2.4.2), intenté de la siguiente manera y funciona, excepto un error de comprobación estática, pero también for(var pair of formData.entries()) no está funcionando.
formData.forEach((value,key) => {
console.log(key+" "+value)
});
var formData = new FormData();
formData.append(''key1'', ''value1'');
formData.append(''key2'', ''value2'');
formData.forEach((value,key) => {
console.log(key+" "+value)
});
En ciertos casos, el uso de:
for(var pair of formData.entries(){...
es imposible.
He usado este código en reemplazo:
var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
var item = iterator.next();
if(item.value!=undefined) {
outputLog[item.value[0]] = item.value[1];
} else if(item.done==true) {
end = true;
}
}
console.log(outputLog);
No es un código muy inteligente, pero funciona ...
Espero que sea ayuda.
Prueba esto ::
let formdata = new formData()
formdata.append(''name'', ''Alex Johnson'')
for(let i of formdata){
console.log(i)
}
Si desea inspeccionar cómo se vería el cuerpo sin procesar, entonces podría usar el constructor de respuesta (parte de API de búsqueda)
var fd = new FormData
fd.append("key1", "value1")
fd.append("key2", "value2")
new Response(fd).text().then(console.log)
Algunos desean sugerir el registro de cada entrada de entradas, pero console.log también puede tomar múltiples argumentos
console.log(foo, bar)
Para tomar cualquier cantidad de argumentos, puede usar el método apply y llamarlo como tal: console.log.apply(console, array) .
Pero hay una nueva forma de ES6 para aplicar argumentos con el operador de dispersión y el iterador
console.log(...array) .
Sabiendo esto, y el hecho de que FormData y ambos arreglos tengan un método Symbol.iterator en su prototipo, simplemente podría hacer esto sin tener que pasar por encima de él, o llamar a .entries() para obtener el asimiento del iterador
var fd = new FormData
fd.append("key1", "value1")
fd.append("key2", "value2")
console.log(...fd)
Yo uso el método formData.entries() . No estoy seguro de todo el soporte de navegador, pero funciona bien en Firefox.
Tomado de Source
// Create a test FormData object
var formData = new FormData();
formData.append(''key1'',''value1'');
formData.append(''key2'',''value2'');
// Display the key/value pairs
for (var pair of formData.entries())
{
console.log(pair[0]+ '', ''+ pair[1]);
}
También hay formData.get() y formData.getAll() con una compatibilidad más amplia con el navegador, pero solo formData.getAll() los valores y no la clave. Ver el enlace para más información.
FormData::entries() comprender que FormData::entries() devuelve una instancia de Iterator .
Toma este formulario de ejemplo:
<form name="test" id="form-id">
<label for="name">Name</label>
<input name="name" id="name" type="text">
<label for="pass">Password</label>
<input name="pass" id="pass" type="text">
</form>
y este JS-loop:
<script>
var it = new FormData( document.getElementById(''form-id'') ).entries();
var current = {};
while ( ! current.done ) {
current = it.next();
console.info( current )
}
</script>
Método actualizado:
A partir de marzo de 2016, las versiones recientes de Chrome y Firefox ahora admiten usar FormData.entries() para inspeccionar FormData. Source
// Create a test FormData object
var formData = new FormData();
formData.append(''key1'', ''value1'');
formData.append(''key2'', ''value2'');
// Display the key/value pairs
for (var pair of formData.entries()) {
console.log(pair[0]+ '', '' + pair[1]);
}
Gracias a Ghost Echo y rloth por señalar esto!
Vieja respuesta:
Después de mirar these here Mozilla , parece que no hay forma de obtener datos de un objeto FormData. Solo puede usarlos para compilar FormData para enviar a través de una solicitud de AJAX.
También encontré esta pregunta que dice lo mismo: FormData.append ("clave", "valor") no funciona .
Una forma de evitar esto sería crear un diccionario regular y luego convertirlo a FormData:
var myFormData = {
key1: 300,
key2: ''hello world''
};
var fd = new FormData();
for (var key in myFormData) {
console.log(key, myFormData[key]);
fd.append(key, myFormData[key]);
}
Si desea depurar un objeto FormData simple, también puede enviarlo para examinarlo en la consola de solicitud de red:
var xhr = new XMLHttpRequest;
xhr.open(''POST'', ''/'', true);
xhr.send(fd);
function abc(){
var form = $(''#form_name'')[0];
var formData = new FormData(form);
for (var [key, value] of formData.entries()) {
console.log(key, value);
}
$.ajax({
type: "POST",
url: " ",
data: formData,
contentType: false,
cache: false,
processData:false,
beforeSend: function() {
},
success: function(data) {
},
});
}