Can't sent json data to server with POST request

Question

I am trying to send json data to server (using fetch API and PHP as a server side language). My server side code is pretty simple:

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: PUT, GET, POST");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

    print_r($_POST);
?>

Now when I send the request simply with "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" like this:

fetch("http://localhost:80/test.php", {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: "a=b"
})
.then(function(response){
    return response.text();
})
.then(function(text){
    console.log(text);
})

Everything works fine and the output is:

Array
(
    [a] => b
)

Now when I want to send the same thing but with JSON like this:

fetch("http://localhost:80/test.php", {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: JSON.stringify({"a":"b"})
})
.then(function(response){
    return response.text();
})
.then(function(text){
    console.log(text);
})

I get the weird output of the whole array as a key:

Array
(
    [{"a":"b"}] => 
)

Now when I change the content type to: "application/json" in fetch call, the output is completely lost and I get the empty array:

Array
(
)

Can you tell me what the reason is? and how to achieve the desired result. (sending whole data with JSON).

possible duplicate from - take a look [https://stackoverflow.com/questions/29775797/fetch-post-json-data](https://stackoverflow.com/questions/29775797/fetch-post-json-data) — netzding, Aug 05 '18 at 14:56
@PhilS Not, just tried that and it still gives the empty output. — Giorgi Cercvadze, Aug 05 '18 at 15:11
@Sakezzz yes, and that worked, but I still want to know what is the problem here. — Giorgi Cercvadze, Aug 05 '18 at 15:23

Martin Zeitler · Accepted Answer · 2018-08-06T15:45:45.820

set the content-type to application/json:

fetch('http://localhost:80/test.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({a: 'b'})
});

and the server-side should be able to decode (there is no $_POST without a form's post-fields):

$array = json_decode(file_get_contents('php://input'));
echo '<pre>'.print_r($array, true).'</pre>';

the test.php should jut send a content type header, along with the JSON:

header('Content-type: application/json; charset=utf-8');

score 1 · Answer 2 · edited Aug 05 '18 at 15:45

1

Your JSON should be like:
JSON.stringify({a: 'Text Value', b: 1})

Then in your PHP:
print_r(json_decode($_POST));

PHP doesn't understand JSON until you decode it.

edited Aug 05 '18 at 15:45

Martin Zeitler

1
19
155
216

answered Aug 05 '18 at 15:30

JonHayman

176
3
9

score 1 · Answer 3 · answered Aug 05 '18 at 16:39

You code below:

fetch("http://localhost:80/test.php", {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: JSON.stringify({"a":"b"})
})
.then(function(response){
    return response.text();
})
.then(function(text){
    console.log(text);
})

Should be written as:

fetch("http://localhost:80/test.php", {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: {"a":"b"}
})
.then(function(response){
    return response.text();
})
.then(function(text){
    console.log(text);
})

Note: body: JSON.stringify({"a":"b"}) has been changed to body: {"a":"b"}

Can't sent json data to server with POST request

3 Answers3