Elemento específico de alerta en [Formdata de objeto] (para pruebas) -- javascript campo con ajax campo con form-data camp Relacionados El problema

Alert specific element in [object FormData] (for testing)


7
vote

problema

Español

Estoy tratando de ver qué contenido está contenido dentro de un [object FormData] , y en particular dentro de un elemento específico cuyo nombre debe ser Name . Me gustaría alertarlo, para verificar si el contenido es correcto, pero al hacerlo, devuelve undefined :

      alert(fd['Name']);   

Estoy bastante seguro de que estoy cargando correctamente los datos del formulario, así que me preguntaba si el problema es que estoy accediendo a los datos de la manera incorrecta ...

PS Alerta solo fd DEVOLUCION [object FormData]

Original en ingles

I'm trying to see what content is contained inside an [object FormData], and in particular inside a specific element whose name should be Name. I would like to alert it, to check if the content is correct, but doing so returns undefined:

    alert(fd['Name']); 

I'm pretty sure I'm loading the form data correctly, so I was wondering if the problem is that I'm accessing the data in the wrong way...

PS alerting only fd returns [object FormData]

        
 
 

Lista de respuestas

13
 
vote
vote
La mejor respuesta
 

Ivanzh me informó que este enfoque no funcionó para él, lo que me impulsó a investigar el objeto HTML5 FormData . A medida que resulta, estaba totalmente equivocado al respecto (ver la respuesta incorrecta antigua a continuación). Todos los datos para FormData reside en nativo . Eso significa que el navegador maneja los datos de los campos de formulario y las cargas de archivos en el idioma de su implementación.

citando mdn :

NOTA: ... Los objetos de Formdata no son objetos ritificables. Si ¿Desea rinificar los datos enviados, use el AJAX PURE-AJAX anterior? ejemplo. Tenga en cuenta también que, aunque en este ejemplo hay algún archivo Campos, cuando envía un formulario a través de la API de Formdata que realiza No es necesario usar la API de FileReader también: los archivos son automáticamente cargado y cargado.

No hay forma de representar esta información en JavaScript, por lo que mi ingenua sugerencia para simplemente serializarla como JSON no funcionará (lo que me incita a preguntarse por qué se aceptó esta respuesta en primer lugar).

Dependiendo de lo que está tratando de lograr (por ejemplo, si solo está tratando de depurar), es posible que sea posible simplemente rebotar esta información de un script del lado del servidor que devuelve los metadatos JSON relevantes. En PHP, por ejemplo, puede enviar su Formdata a analyzeForm.php , que puede acceder fácilmente a todo lo que adjuntas a Formdata bajo la Solicitud de Superglobal relevante. El script digeriría el contenido de su formulario y devolvería la información relevante en fácil pararse JSON. Esto es muy ineficiente, por lo que probablemente no sea adecuado para entornos de producción, pero es algo.

Antigua respuesta incorrecta:

Podrías intentar usar:

  alert(JSON.stringify(fd));   

Para ver una representación textual de la estructura de fd .

También puede usar console.log , pero esta es una característica no estándar y no está garantizada para estar presente en todos los navegadores.

 

IvanZh informed me that this approach did not work for him, which prompted me to do some research into the HTML5 FormData object. As it turns out, I was totally wrong about this (see old incorrect answer below). All of the data for FormData resides in native code. That means the browser handles the data for the form fields and file uploads in the language of its implementation.

Quoting MDN:

Note: ... FormData objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.

There is no way to represent this information in JavaScript, so my naive suggestion to simply serialize it as JSON will not work (which prompts me to wonder why this answer was accepted in the first place).

Depending on what you are trying to achieve (eg. if you're only trying to debug), it might be feasible to simply bounce this information off a server side script that returns relevant JSON metadata. In PHP, for example, you could send your FormData to analyzeForm.php, which can easily access everything that you attached to FormData under the relevant request superglobal. The script would digest the contents of your form and return relevant information in easy to parse JSON. This is very inefficient, so it is probably not suitable for production environments, but it's something.

Old incorrect answer:

You could try using:

alert(JSON.stringify(fd)); 

to view a textual representation of the structure of fd.

You could also use console.log, but this is a non-standard feature and is not guaranteed to be present in all browsers.

 
 
       
       
4
 
vote

Spokey del usuario Póngame en esta técnica usando JSFiddle aquí que ha sido muy útil para poder "ver" los valores En un objeto Formdata, la lógica básica es:

  function submitFormFunction() { //create formData object var myFormData = new FormData(); // get the values from some input fields var myKey1 = $("input[name='my_field_one']").val(); var myKey2 = $("input[name='my_field_two']").val(); // append the values to the formData object, whilst also defining their key names myFormData.append("my_field_one",myKey1); myFormData.append("my_field_two",myKey2); // mock implementation - in order to view what is being sent var xhr = new XMLHttpRequest; xhr.open('POST', '/echo/html/', true); xhr.send(myFormData); }   

Solo mantén la pestaña 'NET' abierta en Firebug y podrá ver los valores.

 

User Spokey put me on to this technique using jsFiddle here which has been very handy in being able to "see" the values in a formData object, the basic logic being:

function submitFormFunction() { //create formData object var myFormData = new FormData(); // get the values from some input fields var myKey1 = $("input[name='my_field_one']").val(); var myKey2 = $("input[name='my_field_two']").val(); // append the values to the formData object, whilst also defining their key names myFormData.append("my_field_one",myKey1); myFormData.append("my_field_two",myKey2); // mock implementation - in order to view what is being sent var xhr = new XMLHttpRequest; xhr.open('POST', '/echo/html/', true); xhr.send(myFormData); } 

Just keep the 'Net' tab open in Firebug and you will be able to see the values.

 
 
-2
 
vote

deberías hacer:

  console.log(fd['Name']);   

y en la mayoría de los navegadores, especialmente Chrome, abre herramientas de desarrollador (F12) y vea la consola.

Obtendrá una buena vista ampliable de su objeto y puede inspeccionarlo.

 

You should do:

console.log(fd['Name']); 

And in most browsers, especially chrome you open Developer tools (F12) and see the console.

You'll get a nice expandable view of your object and you can inspect it.

 
 

Relacionados problema

4  ¿Cómo puede mi servlet recibir parámetros de un formulario de datos multipart / formulario?  ( How can my servlet receive parameters from a multipart form data form ) 
Tengo una página que tiene esta pieza de código: <form action="Servlet" enctype="multipart/form-data"> <input type="file" name="file"> <input type="text" n...

118  Cómo convertir Formdata (objeto HTML5) a JSON  ( How to convert formdata html5 object to json ) 
¿Cómo convierto las entradas de un objeto HTML5 FormData6 a JSON? La solución no debe usar jQuery. Además, no debe ser simplemente serializar el objeto co...

1  Error de invocación ilegal (si no se establece ProcessData y no puede encontrar el manejador de acción si se establece) en la solicitud AJAX en WordPress  ( Illegal invocation error if processdata not set and can not find action handler ) 
Perdón por el mal título. No entiendo por qué obtengo un error function updateDB(){ var formData = new FormData(); formData.append('action', 'det-lil...

75  Cómo agregar un conjunto completo de modelo a Formdata y obtenerlo en MVC  ( How to append whole set of model to formdata and obtain it in mvc ) 
¿Cómo paso un objeto de modelo completo a través de Formdata y convertirlo en el tipo de modelo en el controlador? a continuación es lo que he probado! P...

1  ¿Cómo validar la longitud del contenido de los datos de forma multipart en JavaScript?  ( How to validate content length of multipart form data in javascript ) 
Puño POST FormData (incluidos los archivos) a un servidor que rechaza las solicitudes con una longitud de contenido que excede un límite específico. Me gust...

0  Postman: en una publicación de datos de forma, para un campo de contenido de archivo, ¿se codifica Postman Base64?  ( Postman on a form data post for a file content field does postman base64 enc ) 
En una publicación de datos de formulario, para un campo de contenido de archivo, ¿se codifica Postman Base64? ¿O son los bytes crudos enviados al punto final...

3  Django Createview: APEGA APEGAKEYKEY TO CustomForm Data  ( Django createview append foreignkey to customform data ) 
Tengo una creación de la siguiente manera: class ResumeCreateView(CreateView): model = Resume def form_valid(self, request, form): candida...

3  Formdata apéndice JSON  ( Formdata append json ) 
¿Cómo puedo crear el siguiente resultado utilizando Formdata ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="data"; Content-...

1  ¿Cómo saber qué <INPUT> se envía cuando varias se definen dentro de un <formulario>?  ( How to know which input is submited when several ones are defined within a fo ) 
Quiero implementar la siguiente función de JavaScript simple submitForm() Basado en XMLHttpRequest y FormData . Esta función funciona bien en el primer ...

1  JQUERY AJAXSETUP - APROBACIÓN DE DATOS GLOBALES A FORDATA  ( Jquery ajaxsetup appending global data to formdata ) 
Estoy pasando un parámetro global en todas las solicitudes de JQUERY AJAX utilizando la función ajaxSetup como a continuación $.ajaxSetup({ data: { ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos