Javascript: Issues with POST request via Fetch

Question

I'm trying to post (as in request type of POST) some JSON data to a PHP back end page using Fetch, but for some reason, the PHP page is reading the POST as empty.

Form Markup

      <form action="add_to_mailchimp.php" method="POST">
        <input type="text" name="email" placeholder="Enter your email" />
        <button type="submit">Go</button>
      </form>

Javascript:

document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const payload = {
    // email: document.querySelector('[name="email"]').value,

    email: 'dpa@gmail.com', // hard code value just for example
  };
  console.log('about to submit %o', payload);
  fetch('add_to_mailchimp.php', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => {
      console.log(response);
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
});
});

PHP

<?php
  print json_encode(array('postObj' => $_POST, 'reqType' => $_SERVER['REQUEST_METHOD'));
  die;
?>

The following is written to the console upon submitting the form.

{postObj: [], reqType: "POST", [[Prototype]]: Object}

When I remove the javascript and allow the form to submit normally and add the following to the PHP:

    print '<pre>';
    print_r($_POST);
    print '</pre>';

I get:

Array
(
    [email] => dp@gail.com
)

Where dp@gmail.com is whatever value is entered into the text field. I've been banging my head into the wall trying to figure this out for the past hour and am officially out of ideas. Can anyone shed some light on this for me? Thanks!

You can watch the real payload beeing sent in a browsers dev tools, network tab. What's there? — Jared, Jan 15 '23 at 07:05
@Jared - the request payload shows the correct values (`{email: "dp@gmail.com"}`) and response shows the exact same thing as what is displayed in the console. — Daveh0, Jan 15 '23 at 07:27
Your PHP is invalid - it is missing a closing `]` after `REQUEST_METHOD` — Professor Abronsius, Jan 15 '23 at 09:32
Does this answer your question? [Receive JSON POST with PHP](https://stackoverflow.com/questions/18866571/receive-json-post-with-php) — gre_gor, Jan 16 '23 at 13:13

Wisdom Ighofose · Accepted Answer · 2023-01-15T08:49:24.210

1

Change your PHP to the code below:

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

This allows you to read raw data from the request body

edited Jan 15 '23 at 08:49

answered Jan 15 '23 at 08:26

Wisdom Ighofose

357
3
6

score 1 · Answer 2 · answered Jan 15 '23 at 10:20

A single page, working demo to illustrate how you might accomplish the stated aims. Using, as already pointed out, file_get_contents('php://input') is correct as you are no longer sending a regular www-urlencoded or form-data type request as you specify the Content-Type to be json

Also added in a small piece of code to clear the input element on focus and restore if the user failed to add an email address of their own - very rudimentary though with a regex to check that any entered value is more or less correct as an email address. Further checks server-side should be done using filter_input or similar to ensure email is actually valid when received at server.

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        $json=json_encode(
            array(
                'postObj' => file_get_contents('php://input'),
                'reqType' => $_SERVER['REQUEST_METHOD']
            )
        );
        exit( $json );
    }
    
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Mailchimp</title>
    </head>
    <body>
        
    
        <form name='mailchimp' action='add_to_mailchimp.php' method='POST'>
          <input type='text' name='email' placeholder='Enter your email' value='dpa@gmail.com' />
          <button type='submit'>Go</button>
        </form>
        
        
        
        <script>
        
            const b=false;  // set as true to change url used by Fetch
            const d=document;
            const f=d.forms.mailchimp;
            const pttn=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            d.addEventListener('DOMContentLoaded', () => {

              // clear default value on focus
              f.email.addEventListener('focus',e=>{
                  e.target.value='';
              });
              
              // restore default value if left empty
              f.email.addEventListener('blur',e=>{
                  if( !e.target.value.match( pttn ))alert('Invalid email address');
                  if( e.target.value=='' )e.target.value=e.target.defaultValue;
              });
              
              // send ajax request
              f.addEventListener('submit', e=>{
                e.preventDefault();
                
                if( !f.email.value.match( pttn ) ) return
                    
                const payload = {
                    email:f.email.value
                };
                
                const args={
                    method:'POST',
                    mode:'cors',
                    body:JSON.stringify( payload ),
                    headers:{
                      'Content-Type':'application/json',
                    }
                };
                
                const callback=(r)=>{
                    console.log( r );
                };

                // Change the variable above to true to use Form Action as target url
                let url=b ? f.action : location.href;
                
                fetch( url, args )
                    .then(r=>r.json())
                    .then(callback)
                    .catch(console.log)
             
              });
            });
        </script>
    </body>
</html>

Javascript: Issues with POST request via Fetch

2 Answers2