Obtaining data from PHP file returns null value
P粉617237727
P粉617237727 2023-08-30 11:20:14
0
1
495
<p>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. </p> <p>I'm using POST, but I tried using GET and got the same result</p> <p>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. </p> <p><em><strong>datosJS.js</strong></em></p> <pre class="brush:php;toolbar:false;">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); })</pre> <p><em><strong>Test.php</strong></em></p> <pre class="brush:php;toolbar:false;"><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); ?></pre> <p>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. </p> <p>Thanks for your help! </p> <p>** Edited a small change in fetch that now allows me to view the data in the console</p>
P粉617237727
P粉617237727

reply all(1)
P粉826283529

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template