Unable to access posted data in php

Question

I'm using reactjs and PHP and trying to POST some data using fetch API. The data is posted successfully but the format of data is weird on server-side, that I'm not able to use it.

Here is part of my code:

Javascript

var url = "http://cyg.com/router.php";

var data = {
  service: 'Grade',
  programme: this.state.programme,
  enrolment: this.state.enrolment
};

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'application/json'
  }
})
.then(
  res => res.json()
)
.then(
  (result) => {
    console.log(result);
    //code to handle result here...
  },
  (error) => {
    console.log(error);
    //code to handle error here...
  }
);

PHP

<?php
  print_r($_POST); // here just to verify posted data. Remove later.
  $service = $_POST['service'];
  $programme = $_POST['programme'];
  $enrolment = $_POST['enrolment'];
  //some to code to process request....
?>

On posting data, it gives error that says undefined indexes service, programme and enrolment.

On Inspecting the XHR POST request in console of the browser I got following Params and Response of the request.

Params

Response

You can see in Response (2nd Image), the value of $_POST is in the format:

Array
(
    [{"service":"Grade","programme":"BCA","enrolment":"147996460"}] => 
)

I'm not able to figure out the reason of the problem. However, if I change the Javascript in the following way, everything works fine.

Modified JavaScript

var url = "http://cyg.com/router.php";

/*var data = {
  service: 'Grade',
  programme: this.state.programme,
  enrolment: this.state.enrolment
};*/

var data = "service=Grade&programme="+this.state.programme+"&enrolment="+this.state.enrolment;

fetch(url, {
  method: 'POST',
  body: data,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'application/json'
  }
})
.then(
  res => res.json()
)
.then(
  (result) => {
    console.log(result);
    //code to handle result here...
  },
  (error) => {
    console.log(error);
    //code to handle error here...
  }
);

On changing JavaScript, I observe a change in the format of request params too, It is as follow:-

Thank You!!

I think you can just use `body: data,` instead of `body: JSON.stringify(data),`. — u_mulder, Jan 01 '19 at 12:34
As far I know that `JSON.stringify(data)` method accept a javascript `object` and change it to `sting`. And In first piece of JavaScript, `data` is a javascript `Object` — Anshuman, Jan 01 '19 at 12:37
_"if I change the Javascript in the following way, everything works fine"_ - so what's the problem then? — Jeff, Jan 01 '19 at 12:41
does it work if you use `json_decode` on the PHP side before trying to access the values? — Robin Zigmond, Jan 01 '19 at 12:42
The problem is that why the first way was not working. How the `POST`ed data become the `key` of the `$_POST` variable?? @Jeff — Anshuman, Jan 01 '19 at 12:43
@u_mulder _I think you can just use `body: data`, instead of `body: JSON.stringify(data)`,_ What makes you think so?? — Anshuman, Jan 01 '19 at 12:46
*"How the POSTed data become the key of the $_POST variable??"* ...... because you did that in `body: JSON.stringify(data)` . when you do `script.php?this will be a key in the $_GET parameters on the server` — Accountant م, Jan 01 '19 at 12:47
@RobinZigmond, When I do `json_decode`, I got the error says : _Warning: json_decode() expects parameter 1 to be string, array given in......_ — Anshuman, Jan 01 '19 at 12:49
@iNullPointer the body of the request should be url-encoded not a json string. check [this question](https://stackoverflow.com/questions/22678346/convert-javascript-object-to-url-parameters) — Accountant م, Jan 01 '19 at 12:50
What is `fetch()` function on your javascript code? if you used something like jQuery ajax function that accepts parameter **data** not **body** it will convert the object to it's url-encoded format automatically. But it seems that the body parameter in your fetch function sets the body of the request as it is without converting it to url-encoded `foo=bar&zar=tar` — Accountant م, Jan 01 '19 at 12:56
If I get it right, `fetch` do not url-encoded the body parameter but `JQuery` do. @Accountantم — Anshuman, Jan 01 '19 at 12:59
@iNullPointer Exactly, you can do this : `$.ajax({url:"page.php",data:data,method:post})` and `$.ajax()` function will convert your "data" object into it's correct url-encoded format that your server expects. The body of your request is currently like `"{foo:bar,zar:tar}"` ,where it should be like `foo=bar&zar=tar` — Accountant م, Jan 01 '19 at 13:05

Unable to access posted data in php

0 Answers0