Sending an array per ajax request

Question

I want to send as ajax request with array(which can be any length) as 1 parameter, something like :

mandatoryFields = [];
for (i = 1; i <= post_type_max_elements; i++) {
    ...
    var mandatoryItem = []
    mandatoryItem['optionName'] = optionName;
    mandatoryItem['optionValue'] = optionValue;
}


var data = {
    action: 'update_mandatory_fields',
    post_type: select_post_type,
    mandatoryFields: mandatoryFields
};
jQuery.ajax({
    type: 'POST',
    dataType: "json",
    data: data,
    ...

Seems, that this not work, as on server parameter mandatoryFields is not defined. Which is the best way?

Thanks!

Answer 1

You can use JSON.stringify() to convert your array into a String.

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified, or optionally including only the specified properties if a replacer array is specified.

In your example:

$.ajax({
  type: "POST",
  url: url,
  data: {yourData: JSON.stringify(data)},
  success: function(response){
      //Callback function - do something if the request succeeded
  }
});

Note that you can also use $.post() instead of $.ajax() .

To reconstruct the array with php , you can use json_decode($_POST['yourData']);

Answer 2

jQuery, by default, serializes array in the PHP way:

$.ajax({
  url: "http://example.com/",
  data: {
    foo: [1, 2]
  }
})

will serialize to http://example.com/?foo[]=1&foo[]=2 . If your serverside framework supports this style of parameter passing, you should get an array reconstructed in the parameters object.

If not, and if your server supports multiple parameter values for the same name, you can $.ajaxSetup({ traditional: true }); ; this will make ajax serialize to http://example.com/?foo=1&foo=2 .

The third option, as mentioned by maja, is to explicitly JSON-encode (and on serverside, JSON-decode) all composite values.

Since you did not specify what you have for your serverside solution, I can't tell you which of the first two elegant scenarios you can use; the third, manual one is foolproof.

Answer 3

I made on client :

mandatoryFields[mandatoryFields.length]= JSON.stringify(  {optionName: optionName, optionValue: optionValue}  )

and on server I see that $_POST(php) var has value:

update_mandatory_fields $_POST::Array
(
    [action] => update_mandatory_fields
    [post_type] => post
    [mandatoryFields] => Array
        (
            [0] => {\"optionName\":\"post_type_mandatory_selection:post::element_1\",\"optionValue\":\"post_type_mandatory_selection:post::element_1:C\"}
        )

)

In circle I did not find the right way how deal with string [0] =>

{\"optionName\":\"post_type_mandatory_selection:post::element_1\",\"optionValue\":\"post_type_mandatory_selection:post::element_1:C\"}
foreach( $mandatoryFields as $nextMandatory ) {
    $optionValue= json_decode($nextMandatory['optionValue']); // NULL
    $optionName= json_decode($nextMandatory['optionName']); // NULL

which is the right way?