title: Unable to access posted data in php
body: <p>I'm using <code>reactjs</code> and <code>PHP</code> and trying to <code>POST</code> some data using <code>fetch API</code>. The data is posted successfully but the format of data is weird on server-side, that I'm not able to use it.</p>
  
  <p>Here is part of my code:</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>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 =&gt; res.json()
  )
  .then(
    (result) =&gt; {
      console.log(result);
      //code to handle result here...
    },
    (error) =&gt; {
      console.log(error);
      //code to handle error here...
    }
  );
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;?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....
  ?&gt;
  </code></pre>
  
  <p>On posting data, it gives error that says undefined indexes <code>service</code>, <code>programme</code> and <code>enrolment</code>.</p>
  
  <p>On Inspecting the <code>XHR POST</code> request in <code>console</code> of the browser I got following Params and Response of the request.</p>
  
  <p><strong>Params</strong>
  <a href="https://i.stack.imgur.com/VSzdb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VSzdb.png" alt="Format of data posted"></a></p>
  
  <p><strong>Response</strong>
  <a href="https://i.stack.imgur.com/naN3h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/naN3h.png" alt="Format of data returned"></a></p>
  
  <p>You can see in <em>Response</em> (2nd Image), the value of <code>$_POST</code> is in the format:</p>
  
  <pre><code>Array
  (
      [{"service":"Grade","programme":"BCA","enrolment":"147996460"}] =&gt; 
  )
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Modified JavaScript</strong></p>
  
  <pre><code>var url = "http://cyg.com/router.php";
  
  /*var data = {
    service: 'Grade',
    programme: this.state.programme,
    enrolment: this.state.enrolment
  };*/
  
  var data = "service=Grade&amp;programme="+this.state.programme+"&amp;enrolment="+this.state.enrolment;
  
  fetch(url, {
    method: 'POST',
    body: data,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json'
    }
  })
  .then(
    res =&gt; res.json()
  )
  .then(
    (result) =&gt; {
      console.log(result);
      //code to handle result here...
    },
    (error) =&gt; {
      console.log(error);
      //code to handle error here...
    }
  );
  </code></pre>
  
  <p>On changing JavaScript, I observe a change in the format of request params too, It is as follow:-
  <a href="https://i.stack.imgur.com/lO0PN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lO0PN.png" alt="Format of data posted"></a></p>
  
  <p>Thank You!!</p>