ajax - objeto - var formdata new formdata form '') 0

Envío de FormData anidado en AJAX

Question

Necesito enviar algunos datos usando ajax y FormData, porque quiero enviar un archivo y algunos otros parámetros. La forma en que suelo enviar datos es esta:

$.ajax({
    type:       ''POST'',
    url:        ''some_url'',
    dataType:   ''json'',
    processData:false,
    contentType:false,
    data:{
        Lvl_1-1: ''something'',
        Lvl_1-2: ''something'',
        Lvl_1-3: {
            Lvl_1-3-1: "something",
            Lvl_1-3-2: "something",
            Lvl_1-3-3: "something",
        },
    },
    ...
});

Si no uso FormData (), no tengo ningún problema, pero cuando uso FormData (), solo los datos en Lvl1 están bien, pero todo lo anidado se muestra como una cadena como esta

<b>array</b> <i>(size=3)</i>
    ''Lvl1-1'' <font color=''#888a85''>=&gt;</font> <small>string</small> 
        <font color=''#cc0000''>''Something''</font> 
        <i>(length=23)</i>
    ''Lvl1-2'' <font color=''#888a85''>=&gt;</font> <small>string</small> 
        <font color=''#cc0000''>''''Something''''</font> <i>(length=3)</i>
    ''Lvl1-3'' <font color=''#888a85''>=&gt;</font> <small>string</small> 
        <font color=''#cc0000''>''[object Object]''</font> <i>(length=17)</i>

Si utilizo FormData () para codificar los datos dentro de Lvl1-3, en lugar de [object Object] obtengo [object FormData]

¿Cómo obtengo una matriz en lugar de cadena en Lvl1-3?

NOTA: Si el archivo está en el nivel superior (Nivel1), puedo enviar el archivo sin problemas utilizando FormData (). No escribí el código del archivo adjunto porque ese no es el problema, los datos anidados sí lo están. Acabo de mencionar el archivo porque es por eso que estoy usando FormData ().

Answer 1

En mi extremo, he stringify mis parámetros anidados y unstringify en el otro extremo.

Por ejemplo, si quiero pasar:

{"sthing":
  {"sthing":"sthing"},
  {"picture":
    {"legend":"great legend"},
    {"file":"great_picture.jpg"}
  }
}

Entonces lo hago:

// On the client side
const nestedParams = {"sthing":
                       {"sthing":"sthing"},
                       {"picture":
                         {"legend":"great legend"}
                       }
                     };
const pictureFile = document.querySelector(''input[type="file"]'')[0];
const formDataInstance = formData new;
formDataInstance.append("nested_params": JSON.stringify(nested_params);
formDataInstance.append("file": document.querySelector(''input[type="file"]'')[0]);


// On the server side
params["nested_params"] = JSON.parse(params["nested_params"]);
params["nested_params"]["sthing"]["picture"]["file"] = params["file"];

Answer 2

Los datos de la forma URL codificada no tienen ninguna forma nativa de expresar estructuras de datos complejas. Solo admite pares simples de clave = valor.

?foo=1&bar=2

La mayoría de las bibliotecas de análisis de datos de formularios permiten matrices de datos usando claves con el mismo nombre

?foo=1&foo=2

PHP atornilló su propia sintaxis sobre ese formato:

?foo[]=1&foo[]=2

lo que permitió claves con nombre en una matriz asociativa:

?foo[bar]=1&foo[baz]=2

y matrices anidadas:

?foo[bar][level2a]=1&foo[bar][level2b]=2

Debido a la prevalencia de PHP, jQuery adoptó esa sintaxis para generar datos de formulario cuando pasa un objeto JavaScript a los data .

Si desea utilizar FormData , jQuery no lo reprocesará.

El efecto que está viendo es porque está tratando de poner un objeto (supongo que una instancia de FormData, pero no ha mostrado esa parte de su código) como el segundo argumento para append , donde se espera una cadena.

Necesita generar los nombres de las claves usando la sintaxis de PHP usted mismo.

form_data_instance.append("Lvl_1-3[Lvl_1-3-1]", "something");
form_data_instance.append("Lvl_1-3[Lvl_1-3-2]", "something");
form_data_instance.append("Lvl_1-3[Lvl_1-3-3]", "something");