How to store javascript array or JSON into php

Question

I have a javaScript array which I need to store in PHP so that later I can store it to MySQL database.

index.php

<form method="post">
<button type="submit" class="btn btn-default" id="php-submit" name="php-submit"><span class="glyphicon glyphicon-upload"></span></button>
<table class="table" id="table-1">
 <-- my finalArray gets generated by selecting some of these table cell values -->
</table>
</form>

app.js

$('#php-submit').click(function()
{ // For demo purpose, I have written hardcoded array values here
 var finalArray = ["Nov 2017 0:00 - 0:59", "Dec 2017 0:00 - 0:59", "Nov 2017 1:00 - 1:59", "Dec 2017 1:00 - 1:59"];
 // console.log(finalArray);
 str_json = JSON.stringify(finalArray);
 console.log(str_json);
 $.ajax({
 type: "POST",
 url: "script.php",
 data: {data : str_json}, 
 cache: false,
 success: function(){
 alert("OK");
 }
 });
 // $.post('script.php', { data: finalArray }, function (data) { 
 // alert("OK");
 // });
});

After user clicks ('#php-submit') button, I want to be display 'finalArray' or 'str_json' on my script.php.

Below are 4 different approaches that I have tried.

script.php

// approach 1: output --> blank page
 $data = json_decode(stripslashes($_POST['data']));
 foreach($data as $d){
 echo $d;
 }
// approach 2: ouptut --> null
 $data = json_decode(stripslashes($_POST['data']));
 var_dump($data);
// approach 3: output --> null
 header('Content-type: application/json; charset=utf-8');
 $json = file_get_contents('php://input');
 $json_decode = json_decode($json, true); 
 $json_encode = json_encode($json_decode);
 echo $json_encode;
// approach 4: output --> array(1) { [0]=> string(4) "null" }
 $data = $_POST['data'];
 $json_encode = json_encode($data);
 $ar = explode(',', $json_encode);
 var_dump($ar);

• Collin: This link explains a lot: stackoverflow.com/questions/8599595/…
• Jordi Nebot: Try data: str_json in your $.ajax() call.

Answer 1

I believe the problem is that you are sending $.ajax request but are checking the script.php from browser tab. to see your ajax request you need to use Chrome Dev Tools. Like:

1. Open Chrom Dev Tools with Ctrl + Shift + I
2. Move to Network Tab. enter image description here
3. Look for your request in the XHR section:enter image description here

Now I ran your code and it worked just fine for me. As you can see from the screenshots too.

Edit: Instead of sending an ajax request try submitting a dynaimcally generated <form>, Like:

$('#php-submit').click(function()
{
 var finalArray = ["Nov 2017 0:00 - 0:59", "Dec 2017 0:00 - 0:59", "Nov 2017 1:00 - 1:59", "Dec 2017 1:00 - 1:59"];
 str_json = JSON.stringify(finalArray);
 var newForm = $('<form>', {
 'action': 'script.php',
 'target': '_top',
 'method': 'POST'
 }).append($('<input>', {
 'name': 'data',
 'value': str_json,
 'type': 'hidden'
 }));
 $(document.body).append(newForm);
 newForm.submit();
});

But if you don't want to redirect to another page using <form>.Then in your script.php, do something like this using $_SESSION:

if(isset($_POST['data']))
{
 $_SESSION['data'] = json_decode(stripslashes($_POST['data']));
}
var_dump($_SESSION);

Answer 2

Not change app.js! Then, you must type this code in script.php:

$array = json_decode($_POST['data']);
//To array iteration elements
foreach ($array as $element){
 echo $element;
}

Hope It helps you!