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

Elliot B. · Accepted Answer · 2014-09-04 03:31:28Z

3

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

edited Sep 4, 2014 at 3:31

answered Sep 4, 2014 at 2:34

Elliot B.

17.7k11 gold badges85 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barmar Over a year ago

It's not really necessary to convert them to integers, since PHP will usually convert strings to numbers when necessary.

Elliot B. Over a year ago

The pitfalls of relying on the loosely typed variables are many. I'm not advocating strong typing for a simple web app, but it certainly is good practice to keep your numbers set as numbers and your strings set as strings. If I were the OP, I would've changed the data type of the POST to application/json so it's clear to PHP that his data is either numeric or a string.

Barmar · Accepted Answer · 2014-09-04 02:23:41Z

2

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

$system = $_POST['system'];

answered Sep 4, 2014 at 2:23

Barmar

789k57 gold badges554 silver badges669 bronze badges

6 Comments

nwolybug Over a year ago

Or if trying to send a multi-dimensional array, use $system[0]

Barmar Over a year ago

Only if he just wants the first row of it.

IlludiumPu36 Over a year ago

In an attempt to simplify the question I have omitted the fact that I'm getting the JS array via an html data tag and using system = $(this).attr('data-system'); Should I update the OP or open a new question?

Barmar Over a year ago

Where the array comes from is irrelevant. An array is an array.

nwolybug Over a year ago

@Barmar, yup. $system[0] would only pull the first index of the multi-dimensional array. In this case, it is what the OP would need since we see no other information.

|

IlludiumPu36 · Accepted Answer · 2014-09-05 02:53:23Z

0

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

edited Sep 5, 2014 at 2:53

answered Sep 4, 2014 at 3:49

IlludiumPu36

4,32411 gold badges65 silver badges106 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2016-08-14 09:38:53Z

-1

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']);

edited Aug 14, 2016 at 9:38

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Sep 4, 2014 at 2:30

Sunand

7235 silver badges10 bronze badges

Collectives™ on Stack Overflow

Send JavaScript array to PHP array via jQuery Ajax

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related