¿Cómo pasar variables de PHP a JavaScript?

Clase 7 de 24 • Curso de PHP: Integración con HTML

Clase anteriorSiguiente clase

Leonardo Rios Pineda

student•

Esta clase resume mis ultimos 3 meses haciendo experimentos raros para comunicar php con js =')

Joel Dominguez Merino

student•

No se me había ocurrido hacer algo así pero que bueno que lo vimos ya que puede ser útil en determinado momento como bien lo dices para obtener un dato que es requerido de esta forma. Pero si, hay que tener cuidado de no usarlo mucho por que en el cliente se puede ver el dato obtenido desde Js y este puede ser editado directamente desde la la consola en caso lo hayamos guardado en una variable. . Código empleado:

<?php
  // Creación de variables
  $personas = [
    [
      'id' => 0,
      'username' => "Joel",
    ],
    [
      'id' => 1,
      'username' => "Julieta",
    ],
    [
      'id' => 2,
      'username' => "Pepe",
    ],
  ];

  $saludo = "¡Hey, que tal!";
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iJCode - Integración de PHP con HTML</title>
</head>
<body>
  <h1 id="saludo"></h2>

    <!-- Obteniendo variables de PHP desde Javascript -->
    <script>
      // Declarando variables
      let d = document;
      let $saludo = d.getElementById('saludo');

      // Pintando en el H1 el valor de la variable obtenida de PHP en JS
      $saludo.textContent = '<?= $saludo ?>';

      // Mostrando en consola el arreglo obtenido de PHP en JS
      let personas = '<?= json_encode($personas) ?>'; // [{"id":0,"username":"Joel"},{"id":1,"username":"Julieta"},{"id":2,"username":"Pepe"}]
      let personasJson = JSON.parse(personas);
      console.log( personasJson ); // (3) [{…}, {…}, {…}]

      // Recorriendo el arreglo obtenido para mostrar los nombres
      personasJson.forEach((el) =>{
        console.log(el.username);
      });
      /*
        Joel
        Julieta
        Pepe
      */
    //  Nota*: Se debe tener cuidado de obtener datos de PHP desde Js ya que esta información se puede leer y editar desde el navegador

    </script>
</body>
</html>

. Resultado:

Tonathiuh Díaz Miranda

student•

No creerías cuantos datos se pueden ver desde la developer tool de chrome, esto es completamente normal, recuerda no manejar información sensible del lado del cliente.

Luis Alberto Aguilar Muñoz

student•

La informacion se esta mostrando por que tu la estas imprimiendo, oh no estoy entendiendo a que te refieres?

Matías Alejandro Abarca Morales

student•

OJO! hay que colocar comillas simples, de lo contrario con las dobles comillas da error en JSON.parse();

LUIS MIGUEL OLARTE BELLO

student•

Gracias, estaba que se me explotaba la cabeza, no sabía porque era el error

Manuel Ramírez Coronel

student•

Muy buena explicación del RetaxMaster! Muy util este video.

José Luis Luna Rubio

student•

Para pasar variables de PHP a Javascript, bastara con imprimir la variable de PHP a la variable de Javascript, esto es completamente valido.

<?php  $number=1 ?>
<script>
let number = <?= $number ?>
</script>

Juan David Rueda Quiroga

student•

El verdadero reto es pasar variables de JS para PHP, toca aprender a hacer API rest

José Samuel Mena Reyes

student•

¿Creo que el audio se escucha mal, como si tuviera interferencia, no se si soy el único que lo escucha 🤔? Algo así como eco al final cuando deja de hablar. Se escucha desde la clase número 1 No es mi primer curso con Carlos, eso si, solo se escuche si tienen un buen headset, aunque no molestaba al inicio, ahora empieza a molestar un poco.

Emerson David Cabrera Salas

student•

En mi caso pude escuchar todo sin problemas.

Cristobal Nyram

student•

var variable ="<?php echo $carro->name ?>"

Esta sería una forma, desconozco si entra en la categoría de las buenas prácticas.

Cristobal Nyram

student•

A lo que se refiere el profesor, es al uso de AJAX

Nota de la clase, este tipo de cosas solo se debe ocupar en cierto casos.

Rafael Junior Ortiz Sánchez

student•

Excelente forma de explicar!

Diego Antonio García Rivas

student•

Tiene más sentido que todas las pruebas que estaba haciendo, la última vez que trate de comunicar PHP con JS, cree uun input y al input le puse todos los valores que necesitaba ... sé que fue mala idea, pero fue lo mejor que se me ocurrio

Matias Barboza

student•

La verdad es que nunca se me hubiese ocurrido, interesante ejercicio. Poco aplicado en la práctica profesional pero para entender conceptos y aprender experimentando es un excelente ejemplo. Además, si funciona en PHP, también lo podemos hacer con python , con java, con Go. etc. cualquier lenguaje que haga SSR.

Carlo Andoni

student•

Me sale este mensaje de error en la consola del navegador: Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data <anonymous> php-a-js.php:14

pero no se que pueda estar mal. este es mi codigo, esta tal cual al video, no sé si tenga que hacer algo más o alguna config.

<?php $users_array = array( array( "id" => 0, "dni" => "00044789" ), array( "id" => 1, "dni" => "78044789" ), array( "id" => 2, "dni" => "01244789" ), ); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PHP a JS</title> </head> <body> <h2>Mandando array de PHP a Js</h2> <script> let users = JSON.parse('<?php json_encode($users_array) ?>'); console.log(users); </script> </body> </html>

Ermilo Joel Dorantes Uc

student•

Hay algo raro en tus comillas en esta línea, cambie el <?php por <?= Intenta así.

let users = JSON.parse('<?= json_encode($users_array) ?>');

Jose Alejandro Pantoja Giraldo

student•

Clasesota!

Sebastián Caraballo Marzola

student•

![](

Jacob Gomez

student•

retaxmaster explica muy bien.

Luis Miguel Falcon Montaño

student•

Brutal!!!. Necesitaba este curso hace años, cuando recien comenzaba a hacerme esta pregunta de pasar variables o datos de php a js.

luis carlos jimenez manga

student•

esta clase me resuleve como 2 meses intentando pasarle datos a un grafico sin que se vea feo.

José Luis Luna Rubio

student•

PHP se ejecuta en tiempo de carga en el servidor, para posteriormente darle el HTML ya procesado al cliente. Mientas que Javascript despues de que la pagina ya fue cargada.

Julio Cardenas

student•

Combino html, javascript y php

salida:

<?php
  // Creación de variables
  $personas = [
    [
      'id' => 0,
      'username' => "Joel",
    ],
    [
      'id' => 1,
      'username' => "Julieta",
    ],
    [
      'id' => 2,
      'username' => "Pepe",
    ],
  ];

  $saludo = "¡Hey, que tal!";
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iJCode - Integración de PHP con HTML</title>
</head>
<body>
  <h1 id="saludo"></h2>

    <!-- Obteniendo variables de PHP desde Javascript -->
    <script>
      // Declarando variables
      let d = document;
      let $saludo = d.getElementById('saludo');

      // Pintando en el H1 el valor de la variable obtenida de PHP en JS
      $saludo.textContent = '<?= $saludo ?>';

      // Mostrando en consola el arreglo obtenido de PHP en JS
      let personas = '<?= json_encode($personas) ?>'; // [{"id":0,"username":"Joel"},{"id":1,"username":"Julieta"},{"id":2,"username":"Pepe"}]
      let personasJson = JSON.parse(personas);
      console.log( personasJson ); // (3) [{…}, {…}, {…}]

      // Recorriendo el arreglo obtenido para mostrar los nombres
      personasJson.forEach((el) =>{
        console.log(el.username);
      });
      /*
        Joel
        Julieta
        Pepe
      */
    //  Nota*: Se debe tener cuidado de obtener datos de PHP desde Js ya que esta información se puede leer y editar desde el navegador

    </script>
</body>
</html>

¿Cómo pasar variables de PHP a JavaScript?

Introducción

¿Cómo se renderiza una página web en mi computadora?

Levantando un servidor local

¿Cómo combinar HTML con PHP?

PHP como preprocesador de HTML

Imprime texto y etiquetas HTML

Condicionales

Ciclos

¿Cómo pasar variables de PHP a JavaScript?

Evita el código espagueti

Refactorizando código espagueti

Manejo de formularios

Cómo obtener una solicitud al servidor con PHP

Envío de un formulario a través de GET

Envío de un formulario a través de POST

Envío de imágenes

Guardando imágenes en el servidor

Tipos de inputs

Otros tipos de inputs

Valida si un formulario ha sido enviado

Sanitizando datos de mi formulario

Validando datos

Proyecto: formulario de contacto

Creando el maquetado

Haciendo la lógica de recepción del formulario

Integrando PHPMailer

Implementando el servidor de correos de Gmail

Conclusión

Es tu turno de poner todo en práctica