Pasar datos de PHP a JavaScript con fetch y JSON

PHP se ejecuta antes que JavaScript

PHP prepara una respuesta en el servidor; JavaScript la recibe en el navegador. Una variable PHP no sigue existiendo como variable JavaScript. Para solicitar datos después de cargar la página, crea una respuesta JSON y consúmela desde una URL del mismo sitio.

Archivo de ejemplo datos.php, sin datos privados ni operaciones que cambien el servidor:

header('Content-Type: application/json; charset=UTF-8');
echo json_encode(
    ['titulo' => 'Ejercicio', 'cantidad' => 0],
    JSON_THROW_ON_ERROR
);

No escribas HTML o mensajes de depuración antes del JSON. Una cabecera correcta no elimina texto que ya se haya enviado al cuerpo.

Recibir y mostrar el resultado

El siguiente código necesita un elemento HTML con id="resultado". Utiliza textContent para mostrar un valor como texto, sin interpretarlo como marcado.

async function cargar() {
  const respuesta = await fetch('/datos.php', {
    headers: { Accept: 'application/json' }
  });
  if (!respuesta.ok) throw new Error('Respuesta HTTP no aceptada');
  const datos = await respuesta.json();
  if (!Number.isInteger(datos.cantidad)) {
    throw new Error('La cantidad debe ser entera');
  }
  document.querySelector('#resultado').textContent =
    datos.titulo + ': ' + datos.cantidad;
}
cargar().catch(() => {
  document.querySelector('#resultado').textContent = 'No se pudo cargar';
});

Qué revisar si no aparece el dato

En las herramientas de red del navegador, distingue un HTTP 404, una respuesta HTML y una respuesta JSON sin la clave esperada. fetch no rechaza automáticamente todos los estados HTTP de error: por eso comprobamos respuesta.ok.

Una llamada al mismo sitio evita tener que abrir permisos CORS sin necesidad. Si solicitas otro dominio, su servidor debe autorizar el origen según su política; no-cors no convierte una respuesta opaca en JSON legible.

Leer no es modificar

Este ejemplo es una lectura sin efectos. Para cambios de perfil, compras o envíos, utiliza el método y las defensas contra solicitudes no autorizadas que correspondan. Nunca envíes a JavaScript una contraseña del servidor: cualquier dato que llega al navegador queda disponible para su usuario.

Referencia 1

Referencia 2