Invio di FormData nidificati su AJAX

Question

Ho bisogno di inviare alcuni dati usando ajax e FormData, perché voglio inviare un file e alcuni altri parametri. Il modo in cui di solito inviare i dati è questa:

$.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", 
     }, 
    }, 
    ... 
}); 

Se io non uso formdata(), non ho alcun problema, ma quando si utilizza formdata(), solo i dati sui lvl1 è ok, ma niente è annidato visualizzato come stringa come questo

<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> 

Se uso formdata() per codificare i dati all'interno Lvl1-3, invece di [object Object] ottengo [object FormData]

come faccio ad avere un allineamento invece di stringa su Lvl1-3 ?

NOTA: se il file è al livello superiore (Lvl_1), è possibile inviare il file senza problemi utilizzando FormData(). Non ho scritto il codice del file allegato perché non è questo il problema, i dati nidificati sono. Ho appena citato il file perché è per questo che sto usando FormData().

Answer 1

URL I dati della forma codificata non hanno alcun modo nativo per esprimere strutture di dati complesse. Supporta solo coppie chiave = valore semplice.

?foo=1&bar=2 

maggior parte delle librerie di dati sotto forma di analisi permettono array di dati utilizzando i tasti con lo stesso nome

?foo=1&foo=2 

PHP imbullonato la propria sintassi in cima a quel formato:

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

che ha consentito di chiavi nominate in un array associativo:

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

e nidificate array:

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

causa della prevalenza di PHP, jQuery adottate che la sintassi per generare dati modulo quando si passa un oggetto JavaScript data.

Se si desidera utilizzare FormData, jQuery non lo rielaborerà per conto dell'utente.

L'effetto che stai vedendo è perché stai provando a mettere un oggetto (sto indovinando un'istanza di FormData, ma non hai mostrato quella parte del tuo codice) come secondo argomento a append - dove una stringa è previsto.

È necessario generare i nomi dei tasti utilizzando la sintassi di PHP.

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"); 

Answer 2

da parte mia, mi stringa i miei parametri annidati e li unstringify su l'altra estremità.

Per esempio, se voglio passare:

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

poi faccio:

// 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"];