Send JavaScript array to PHP array via jQuery Ajax

Question

I'm trying to send a JavaScript array via jQuery Ajax to a new PHP array:

var heart = [31,32,33,34,35,36,37,38,39,42,43];

$('#find_btn').click(function(){
    $.ajax({
        type: "POST",
        url: 'scripts/get_specimens_system.php',
        data: {
                system: heart,
        },
        success: function(data) {
            $('#search_list_container').html(data);
        }
    });
});

In the PHP script I have the following before a MySQL query:

$system = array($_POST['system']);

If I hardcode the data in heart like:

$system = array(31,32,33,34,35,36,37,38,39,42,43);

the query works OK. What am I doing wrong?

In an attempt to simplify the question I have left out the fact that I'm setting the JS array to var system via system = $(this).attr('data-system');

Where the data-system is set to the arrays like:

$('#sub_category_box_systems').html("<a class='sub_category_link' href='#' data-subcat-type='system' data-system='" + brain + "'>Brain</a><br /><hr><a class='sub_category_link' href='#' data-subcat-type='system' data-system='" + nerves + "'>Nerves</a><br /><hr><a class='sub_category_link' href='#' data-subcat-type='system' data-system='" + cerebellum + "'>Cerebellum</a>");

Now if I alert system just before the AJAX statement the alert shows the intergers fine.

$('#sub_category_box_systems').on('click', '.sub_category_link', function() {
    system = $(this).attr('data-system');
});


$('#find_btn').click(function(){
    alert(system);
    $.ajax({
        type: "POST",
        url: 'scripts/get_specimens_system.php',
        data: {
            system: system,
        },
        success: function(data) {
        }
    });
});

AND I have updated the PHP file to:

$system = $_POST['system'];

Still no go, though if I swap the var system with the actual var of an array (for example, heart ), as the Ajax data it works. So what's wrong here? (sorry for changing this OP...).

Odd, if I change var system to a specific array like below it works, so there must be some problem with the formatting using the jQuery .attr('data-system');

$('#sub_category_box_systems').on('click', '.sub_category_link', function() {
    system = heart;
});

Answer 1

By default, jQuery $.ajax will submit your request as form data. If you open your browser debugger while the request is sent, you would see this request data:

system[]:31
system[]:32
system[]:33
system[]:34
system[]:35
system[]:36
system[]:37
system[]:38
system[]:39
system[]:42
system[]:43

PHP understands that this is an array and reads it in as an array by default. You should not wrap it in an array() tag.

You can assign the array to your own variable as such: $system = $_POST['system'];

However, your work isn't quite done there. $system is now an array of strings . Here is a var_dump of $system :

array(11) {
  [0]=>
  string(2) "31"
  [1]=>
  string(2) "32"
  [2]=>
  string(2) "33"
  [3]=>
  string(2) "34"
  [4]=>
  string(2) "35"
  [5]=>
  string(2) "36"
  [6]=>
  string(2) "37"
  [7]=>
  string(2) "38"
  [8]=>
  string(2) "39"
  [9]=>
  string(2) "42"
  [10]=>
  string(2) "43"
}

Use this to convert it to an array of integers :

$system = array_map('intval', $system);

Answer 2

You're adding an extra array around the parameter, which is already an array. Just do:

$system = $_POST['system'];

Answer 3

I awarded the answer to @Barmar as his solution solved the original OP. I still had a problem with getting the JS arrays across to the PHP array due to using system = $(this).attr('data-system') . Changing the code to the following fixed that issue:

$('#sub_category_box_systems').on('click', '.sub_category_link', function() {       
    system = $(this).attr('data-system').split(",");   
});

Answer 4

You can convert that to a string by saying:

data: {
    system: heart.join(",")
}

And converting back to an array on the server side by saying:

$system = explode(",",$_POST['system']);