Obtaining data from PHP file returns null value

Question

I'm trying to test and learn how fetch works so I want to send some data from javascript to a php file, my problem is that I can't retrieve the data (in the php file) and only get a null response.

I'm using POST, but I tried using GET and got the same result

As a side note, in the console, the connection in the network only appears after I press F5, which I understand should already be working when I open Test.php.

datosJS.js

let datos = {
   method: "POST",
   headers: {
            "Content-type" : "application/json"
   },
   body: JSON.stringify({
      username:"Jonathan",
      email:"jonathan@gmail.com",
      password:"123456"
  })
}

fetch('Test.php',datos)
.then(resp => resp.text())
.then(resp =>{
    console.log(resp);
})

Test.php

<script src="datosJS.js" type="text/javascript"></script> //I use this to call "datosJS.js" to receive the data here in Test.php

<?php

 $body = json_decode(file_get_contents("php://input"), true);
    var_dump($body);
    
?>

I know that PHP is on the server side and JS is on the client side, and that they both run at different times, but I'm having trouble finding a solution to this problem.

Thanks for your help!

** Edited a small change in fetch that now allows me to view the data in the console

Answer 1

Finally I managed to solve the problem, explained below:

datosJS.js

window.onload = function() {

let datos = {
   method: "POST",
   headers: {
            "Content-type" : "application/json"
   },
   body: JSON.stringify({ 
      username:"Jonathan",
      email:"jonathan@gmail.com",
      password:"123456"
  })
}

fetch('Test.php',datos)
.then(resp => resp.text())
.then(resp =>{
console.log(resp);
        document.getElementById('results').innerHTML = resp; 

    //document.querySelector('#results').innerHTML = resp; // works as well as getElementById
    
})
}

test.php

<script src="datosJS.js" type="text/javascript"></script>

<section class="Section" id="results" name="results">

            <?php

            $body = json_decode(file_get_contents("php://input"), true);
            $nombre = $body['username'];

            echo  $nombre;
            echo  '</br>';
            print_r($body);
  
            ?>

Below I will mark what is missing in the original code:

• In datosJS.jsdocument.getElementById('results').innerHTML = resp; and wrap everything in window.onload = function() {} middle

• In Test.php add id="results" name="results" to div, section or other content from innerHTML take over.

I hope it helps someone in the future. cheers