0

Tengo una aplicación, con la cual necesito extraer una cierta cantidad de registros que genero con php y pintarlos en una página X a través de javascript.

El asunto es que, utilizando ajax, no tengo problemas enviando una petición post y recibiendo la respuesta, pero probando con fetch, no obtengo nada... Realicé una prueba de recepción de parámetros por post y esto sucedió:

archivo php

echo json_encode($_POST, JSON_UNESCAPED_UNICODE);

Usando Ajax, obtengo de vuelta {"data":"data"} sin problemas

$.ajax({
        url: 'datawidgets.php',
        type: "post",
        data: { "data" : "data" },
        success: function (response) {
            console.log(response);
        }
    });

Pero usando fetch, solo obtengo un array vacío:

fetch('datawidgets.php', {
        method: "POST",
        body: JSON.stringify({ "data" : "data" }),
        headers: {"Content-type": "application/json; charset=UTF-8"}
    })
    .then(response => response.json())
    .then(data => { console.log(data); })
    .catch(err => console.log(err))

No sé qué pueda estar haciendo mal o algún detalle que se me pueda pasar por alto, pero mi idea es poder usar fetch y desligarme un poco de lo que es jquery.

2
  • 1
    Cuando usas fetch con el método POST, en algunos servidores no encontrarás los datos en la superglobal $_POST, ignoro el motivo de por qué ocurre eso. Entonces, puedes buscar los datos en el flujo de entrada de PHP, pues allí sin duda estarán los datos, porque ese flujo tiene los datos que hay en el body. Sería algo así: $post=json_decode(file_get_contents('php://input')); echo(json_encode($post)); Por último, te aconsejo que pongas un header con el content type y el charset también en PHP.
    – A. Cedano
    Commented el 14 ene. 2022 a las 17:31
  • No tenia idea de ese detalle, lo voy a probar. De momento, creando objetos de tipo FormData, como muestran mas abajo, me sirvio de momento bastante bien.
    – Oriel
    Commented el 14 ene. 2022 a las 18:40

2 respuestas 2

2

Yo utilizo un objeto de tipo FormData para enviar los parámetros por POST, quedaría algo así:

const datos = new FormData();
datos.append('parametro_uno', 'valor_uno');
datos.append('parametro_dos', 'valor_dos');

fetch('ruta', { method: 'POST', body: datos }).then(res => {
   console.log(res.json());
   console.log(res.text());
});

Obviamente esto se puede mejorar mucho con funciones asíncronas que simplifican la lectura del código y su funcionamiento.

1
  • 1
    Muchas gracias. Me sirvio esta forma para poder avanzar en el proyecto.
    – Oriel
    Commented el 14 ene. 2022 a las 18:41
0

El fetch debe enviar en body un string u objeto, estás enviando en formato JSON. Deberías quitar las comillas, el Content-Type es con mayúscula en ambos casos.. Quedaría algo así:

fetch("datawidgets.php", {
  method: 'POST'
  body: JSON.stringify(data), 
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log(response));

En JavaScript moderno, si envías un objeto cuya propiedad y valor son iguales, ej: {data:data} se puede pasar sencillamente así {data}.


También puedes probar agregando esto en tu PHP.

$payload = file_get_contents('php://input');
$data = json_decode($payload);
print_r($data);

Si eso funciona, debes retornar $data.

Espero resuelva tu inconveniente, quedo a las órdenes.

6
  • Probe como me indicas y sigue solo enviando un array vacio de vuelta, no entiendo el porque.
    – Oriel
    Commented el 14 ene. 2022 a las 16:50
  • Que es lo que viaja en data, de donde viene?, que error te da en la consola cuando hace la llamada? Commented el 14 ene. 2022 a las 16:54
  • Inicialmente un objeto llamado departamento el cual almacena el valor de este {departamento: 'Regiones'}. Eso por defecto.
    – Oriel
    Commented el 14 ene. 2022 a las 16:58
  • Lo ideal sería del lado de php verificar si estás realmente recibiendo data, hay que identificar donde se está generando el problema. Si lo recibes podrías compararlo con lo que recibes al usar Ajax, eso podrá dar una idea de lo que está sucediendo. Commented el 14 ene. 2022 a las 17:03
  • Disculpa mi ignorancia, pero como podria verificarlo? Lo que me extraña es que de ajax no tenga problemas. Un detalle si... probe usando un pequeño formulario para ir cambiando el departamento y al utilizar un elemento de tipo FormData si envia y recibe bien la informacion desde el servidor, asi que quedo plop.
    – Oriel
    Commented el 14 ene. 2022 a las 17:19

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.