Submitting data forms to AJAX

Question

I need to send some data using ajax and FormData, because I want to send a file and some other parameters. I usually send data:

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

If I do not use FormData (), I have no problem, but when using FormData () only the data on Lvl1 is fine, but something nested is displayed as a string like this

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

If I use FormData () to encode data inside Lvl1-3 instead of [object Object] , I get [object FormData]

How do I get an array instead of a string on Lvl1-3?

NOTE. If the file is at the top level (Lvl_1), I can send the file without problems using FormData (). I did not write the code of the attached file, because this is not a problem, the attached data. I just mentioned the file because because I use FormData ().

Answer 1

URL The encoded form data does not have its own way of expressing complex data structures. It only supports pairs with key = value.

 ?foo=1&bar=2 

Most data parsing libraries allow data arrays using keys of the same name.

 ?foo=1&foo=2 

PHP has fixed its own syntax on top of this format:

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

which allowed named keys in an associative array:

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

and nested arrays:

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

Due to the prevalence of PHP, jQuery has adopted this syntax to generate form data when passing a JavaScript object to data .

If you want to use FormData then jQuery will not handle it for you.

The effect you see is that you are trying to place the object (I assume an instance of FormData, but you have not shown this part of your code) as the second argument to append - where the line is expected.

You need to generate key names using PHP syntax yourself.

 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

For my part, I organize my nested parameters and analyze them at the other end.

For example, if I want to pass:

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

Then I do:

 // On the client side const nestedParams = {"sthing": {"sthing":"sthing"}, {"picture": {"legend":"great legend"} } }; const pictureFile = document.querySelector('input[type="file"]')[0]; const formDataInstance = new FormData; 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"];