0

Estoy intentando realizar una prueba de uso del fetch para enviar datos desde javascript hacia un front en php, sin embargo no logro tomar los datos y solo consigo un resultado NULL.

Lo estoy enviando mediante POST aunque probe mediante un GET y pasa lo mismo

Como nota, en la consola solo aparece la conexion en network luego de apretar F5, entiendo que para que funcione, ya deberia existir cuando ingreso a Test.php

datosJS.js

const profile= { 
    username: "Jonathan",
    email: "[email protected]",
    password: "123456"
}
fetch('Test.php', {
        method: "POST",
        headers: {
            "Content-type" : "application/json"
        },
        body: JSON.stringify(profile)
    }).then(function(response) {
        return response.json();
    });

Test.php

<script src="datosJS.js" type="text/javascript"></script> //lo uso para llamar a datosJS.js al ingresar a Test.php

<?php

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

Se que PHP funciona del lado del servidor y js del cliente, sin embargo me esta costando ver donde esta mi error.

Agradezco su ayuda !

2 respuestas 2

1

Bueno finalmente logre encontrar la solucion, debajo paso a detallarla:

datosJS.js

window.onload = function() {

let datos = {
   method: "POST",
   headers: {
            "Content-type" : "application/json"
   },
   body: JSON.stringify({ 
      username:"Jonathan",
      email:"[email protected]",
      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; //funciona al igual que 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);
  
            ?>

Gracias al aporte de @Wilfredo en la respuesta de arriba que me ayudó a ver los datos en consola, debajo detallo las partes de codigo que faltaron para poder ver los datos en pagina y resolver el problema original:

  • En datosJS.js agregar document.getElementById('results').innerHTML = resp; para setear el valor al item 'results' y envolver todo en window.onload = function() {} para que corra cuando este listo

  • en Test.php indicarle a un "Div" o "Section" o lo que sea, id="results" name="results" donde se asignaran los datos y con un echo podra verse en pantalla.

Espero que a alguien le sirva en el futuro. Saludos.

0

Te hace falta un .then y lo que devuelves desde el php no es un json es un text

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



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

Puedes ver la respuesta en la consola del navegador. con la tecla F12 para chrome

Notas

  • El documento Test.php debe estar en la misma carpeta que el documento donde estas ejecutando el fetch.
  • El documento Test.php debe llamarse así Test.php "mayúsculas incluidas"
1
  • Excelente, si bien ahora logro ver el arreglo completo en consola, mediante var_dump la salida en la pagina sigue siendo 'NULL' aunque no logro descifrar el porque =/ – el 3 ene. 2023 a las 15:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.