How to send an JavaScript array to PHP via jQuery.ajax?
javascript, jquery, json, php
Solution
Got it!
To properly access the JavaScrtipt objects in PHP I need to JSON.stringify them when pushing on the array. Then, on PHP, json_decode them to a PHP object, and access their properties with the '->' operator.
The final solution is as follows:
<?php
include 'ChromePhp.php';
if (isset($_POST['newUsers'])) {
$newUsers = $_POST['newUsers'];
foreach ($newUsers as $user) {
# code...
$usr = json_decode($user);
ChromePhp::log("Nome: " . $usr->nome . " - Idade: " . $usr->idade);
}
} else { ?>
<html>
<body>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
//var newUsersObj = {};
var newUsers = [];
newUser = {};
newUser['nome'] = 'alvaro';
newUser['idade'] = '34';
newUsers.push(JSON.stringify(newUser));
newUser1 = {};
newUser1['nome'] = 'bia';
newUser1['idade'] = '7';
newUsers.push(JSON.stringify(newUser1));
newUser2 = {};
newUser2['nome'] = 'alice';
newUser2['idade'] = '2';
newUsers.push(JSON.stringify(newUser2));
$.ajax({
url: "testcookie.php",
type: "POST",
data: {
'newUsers[]': newUsers
},
success: function () {
},
error: function () {
}
});
</script>
</body>
</html>
<?php } ?>
Problem
I'm trying to send a JavaScript array to a PHP page via jQuery.ajax, but the array is sent only with blank values. If I open the F12 Console on Chrome and check for the JS object, it's there. All filled up. But when I log the PHP variable using the ChromePhp tool, it shows only the blank values (also, if I iterate over the php-array, echoing its values, I get all blanks). I'm deeply confused here. Here goes my sample code: ``` <?php include 'ChromePhp.php'; if (isset($_GET['newUsers'])) { $newUsers = $_GET['newUsers']; ChromePhp::log($newUsers); } else { ?> <html> <body> <script src="js/jquery-2.0.3.min.js"></script> <script type="text/javascript"> var newUsers = []; newUser = []; newUser['nome'] = 'alvaro'; newUser['idade'] = '34'; newUsers.push(newUser); newUser1 = []; newUser1['nome'] = 'bia'; newUser1['idade'] = '7'; newUsers.push(newUser1); newUser2 = []; newUser2['nome'] = 'alice'; newUser2['idade'] = '2'; newUsers.push(newUser2); $.ajax({ url: "testcookie.php", type: "GET", data: { 'newUsers[]': newUsers } }); </script> </body> </html> <?php } ?> ``` Updated Based on the first comments. Now I get to pass the object, but don't know how to read its properties. Already tried $user['nome'] with no result. ``` <?php include 'ChromePhp.php'; if (isset($_POST['newUsers'])) { $newUsers = $_POST['newUsers']; foreach ($newUsers as $user) { # code... # HOW DO I READ THE nome AND idade VALUES HERE? } } else { ?> <html> <body> <script src="js/jquery-2.0.3.min.js"></script> <script type="text/javascript"> //var newUsersObj = {}; var newUsers = []; newUser = {}; newUser['nome'] = 'alvaro'; newUser['idade'] = '34'; newUsers.push(newUser); newUser1 = {}; newUser1['nome'] = 'bia'; newUser1['idade'] = '7'; newUsers.push(newUser1); newUser2 = {}; newUser2['nome'] = 'alice'; newUser2['idade'] = '2'; newUsers.push(newUser2); $.ajax({ url: "testcookie.php", type: "POST", data: { 'newUsers[]': newUsers }, success: function () { }, error: function () { } }); </script> </body> </html> <?php } ?> ```