Sending a JavaScript array to PHP via POST

Question

I am trying to send a JavaScript array to a PHP file via POST.

JS:

var songlist = ['song1', 'song2', 'song3'];

var sendData = function(){
    var data = songList.join(',')
    $.post('test.php', {data: data}).always(function() {
        window.location = 'test.php';
    });
}
sendData();

test.php:

<?php
$songData = $_POST['data'];
$songData = explode(',', $songData); 
print_r(array_values($songData));
?>

when sendData(); directs me to test.php I get:

Notice: Undefined index: data

Why doesn't the data variable have any value when I try to print or use it?

Solution 1

1) $.post('url') - Ajax request is done by $.post() method and you have given "testing.php" as url which is invalid.

2) window.location = 'test.php' - This is used for redirecting to specific page and you have redirected to 'test.php' without any parameter/data. Thats why its showing "Notice: Undefined index: data"

3) Try to understand how ajax works. Follow it -

var songlist = ['song1', 'song2', 'song3'];

var sendData = function() {
  $.post('test.php', {
    data: songlist
  }, function(response) {
    console.log(response);
  });
}
sendData();
// test.php
<?php
if(isset($_POST)){
    if(isset($_POST['data'])){
    $songData = $_POST['data'];
    print_r($songData);
}}
?>

Solution 2

That's not how POST request works. Read more about Ajax, but for now, that's how you should do it.

var songlist = ['song1', 'song2', 'song3'];

var sendData = function() {
  $.post('test.php', {
    data: songlist
  }, function(response) {
    console.log(response);
  });
}
sendData();

// test.php
<?php
$songData = $_POST['data'];
print_r($songData);
?>