Send json object from javascript to php

Question

I am trying to send a JSON object from Javascript / Jquery to PHP and I get an error and msg in my console. What am I doing wrong. I am new to JS and PHP.

JQuery file:

$(document).ready(function() { var flickr = {'action': 'Flickr', 'get':'getPublicPhotos'}; // console.log(typeof(flickr)); var makeFlickrCall = function(flickrObj){ $.ajax({ url: '../phpincl/apiConnect.php', type: 'POST', data: flickrObj }) .done(function(data) { console.log("success"); console.log(JSON.stringify(data)); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); }; makeFlickrCall(flickr); }); 

Php file

 <?php $obj = $_POST['data']; // print_r($obj); return $obj; ?> 

Answer 1

Phil's excellent answer, however, as the name OP says

send json object from javascript ( not jQuery ) in php

this is how it is done with (vanilla) javascript if it helps someone look for this method:

 var jsondata; var flickr = {'action': 'Flickr', 'get':'getPublicPhotos'}; var data = JSON.stringify(flickr); var xhr = new XMLHttpRequest(); xhr.open("POST", "../phpincl/apiConnect.php", !0); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.send(data); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // in case we reply back from server jsondata = JSON.parse(xhr.responseText); console.log(jsondata); } } 

Please note , we still need to convert the server response to a javascript object using JSON.parse()

Now, on the server side (based on Phil’s response), if you send a response to the client, you can do:

 header('Content-type: application/json'); $json = file_get_contents('php://input'); $json_decode = json_decode($json, true); $json_encode = json_encode($json_decode); echo $json_encode; 

NOTE :

First, the reason for decoding and then encoding the json input back is to correctly display slashes in the (possible) URLs inside the data, for example.

json_encode translates this url

 http://example.com 

in

 http:\/\/example.com 

... this is not the case in the OP, but useful in some other scenarios.

Answer 2

The standard jQuery .ajax() method uses the data property to create an x-www-form-urlencoded string to pass to the request body. Something like that

 action=Flickr&get=getPublicPhotos 

Therefore, your PHP script should not look for $_POST['data'] , but instead $_POST['action'] and $_POST['get'] .

If you want to send the raw JSON payload to PHP, do the following ...

Set the AJAX contentType to application/json and send the gated version of your JSON object as a data payload, for example

 $.ajax({ url: '../phpincl/apiConnect.php', type: 'POST', contentType: 'application/json', data: JSON.stringify(flickrObj), dataType: 'json' }) 

Your PHP script will then read the data payload from the php://input stream, e.g.

 $json = file_get_contents('php://input'); 

Then you can parse this into a PHP object or array ...

 $dataObject = json_decode($json); $dataArray = json_decode($json, true); 

And, if you just want to recall it back to the customer.

 header('Content-type: application/json'); // unmodified echo $json; // or if you've made changes to say $dataArray echo json_encode($dataArray); 

Answer 3

Using:

 makeFlickrCall( { data: JSON.stringify( flickr )} ); 

Instead

 makeFlickrCall(flickr); 

Your server side script should get your JSON as follows:

 data="{"action":"Flickr","get":"getPublicPhotos"}"