Can't post JSON variable with AJAX to PHP

Question

In the first document I added a JSON string filled with numbers to localstorage like this:

$.ajax({
   url: "oyvind_liste.php", 
   data: {aktuelle_verdier: aktuelle_verdier}, 
   dataType: "json",
success: function(result){
   var dataToStore = JSON.stringify(result);
   localStorage.setItem('key', dataToStore);
   }});

Then in another document I am trying to post the JSON string retrieved from local storage like this:

<script>
var data = JSON.parse(localStorage.getItem('key'));
var localData = data.join(", ");

$.ajax({
type: 'post',
       data: {localData: localData}, 
       url: '',
       dataType: "json",
       success: function(result){
       console.log(result)
       }});
</script>

The PHP on the same page as the post tries to fetch the data like this:

<?php
$user_id = isset($_POST['localData'])?$_POST['localData']:"";
$values = json_decode($user_id);
var_dump($values);
?>

When I run var_dump I get Array() , so in essence it doesn't post anything. Anyone know whats going wrong?

Answer 1

You don't need to use JSON when sending an array in an object argument to $.ajax . Just put the array there, and jQuery will URL-encode it.

var data = JSON.parse(localStorage.getItem('key'));

$.ajax({
    type: "post",
    data: { localData: data },
    ...
});

Then in PHP you can do:

$values = isset($_POST['localData']) ? $_POST['localData'] : array();
var_dump($values);

You can also send JSON this way:

var json_string = localStorage.getItem('key');
$.ajax({
    type: "post",
    data: { localData: json_string},
    ...
});

then in PHP do:

$values = json_decode(isset($_POST['localData']) ? $_POST['localData'] : '[]');
var_dump($values);