¿Cómo paso las variables y datos de PHP a JavaScript

javascript php


Tengo una variable en PHP,y necesito su valor en mi código JavaScript.¿Cómo puedo llevar mi variable de PHP a JavaScript?

Tengo un código que se parece a este:

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

Tengo un código JavaScript que necesita val y se ve en la línea de:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>




Answer 1 Madara's Ghost


En realidad hay varios enfoques para hacer esto.Algunos requieren más gastos generales que otros,y algunos se consideran mejores que otros.

Sin ningún orden en particular:

  1. Usa AJAX para obtener los datos que necesitas del servidor.
  2. Haz un eco de los datos en la página en algún lugar,y usa JavaScript para obtener la información del DOM.
  3. Haga eco de los datos directamente a JavaScript.

En este post,examinaremos cada uno de los métodos anteriores,y veremos los pros y los contras de cada uno,así como la forma de implementarlos.

1.Usa AJAX para obtener los datos que necesitas del servidor

Este método se considera el mejor, porque los scripts del lado del servidor y del lado del cliente están completamente separados .

Pros

  • Mejor separación entre capas : si mañana deja de usar PHP y desea pasar a un servlet, una API REST u otro servicio, no tiene que cambiar gran parte del código JavaScript.
  • Más legible : JavaScript es JavaScript, PHP es PHP. Sin mezclar los dos, obtienes un código más legible en ambos idiomas.
  • Permite la transferencia asincrónica de datos : obtener la información de PHP puede ser costoso en tiempo / recursos. A veces, simplemente no desea esperar la información, cargar la página y que la información llegue siempre que sea necesario.
  • Los datos no se encuentran directamente en el marcado : esto significa que su marcado se mantiene limpio de datos adicionales y solo JavaScript lo ve.

Cons

  • Latencia : AJAX crea una solicitud HTTP, y las solicitudes HTTP se transfieren a través de la red y tienen latencias de red.
  • Estado : los datos obtenidos a través de una solicitud HTTP separada no incluirán ninguna información de la solicitud HTTP que haya obtenido el documento HTML. Es posible que necesite esta información (por ejemplo, si el documento HTML se genera en respuesta a un envío de formulario) y, si lo hace, tendrá que transferirlo de alguna manera. Si ha descartado incluir los datos en la página (que tiene si está utilizando esta técnica), eso lo limita a las cookies / sesiones que pueden estar sujetas a las condiciones de la carrera.

Ejemplo de implementación

Con AJAX,necesitas dos páginas,una es donde PHP genera la salida,y la segunda es donde JavaScript obtiene esa salida:

get-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to echo the result.
                      // All data should be json_encode()d.

                      // You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (o como se llame la página actual)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

La combinación anterior de los dos archivos alertará 42 cuando el archivo termine de cargarse.

Algo más de material de lectura

2.Haga eco de los datos en la página en algún lugar,y utilice JavaScript para obtener la información del DOM

Este método es menos preferible que AJAX, pero aún tiene sus ventajas. Todavía está relativamente separado entre PHP y JavaScript en el sentido de que no hay PHP directamente en JavaScript.

Pros

  • Rápido : las operaciones DOM a menudo son rápidas y puede almacenar y acceder a una gran cantidad de datos relativamente rápido.

Cons

  • Marcado potencialmente no semántico : por lo general, lo que sucede es que usa algún tipo de <input type=hidden> para almacenar la información, porque es más fácil sacar la información de inputNode.value , pero hacerlo significa que tiene un elemento sin sentido en tu HTML HTML tiene el elemento <meta> para datos sobre el documento, y HTML 5 introduce atributos data-* para datos específicamente para leer con JavaScript que pueden asociarse con elementos particulares.
  • Ensucia la fuente : los datos que PHP genera se envían directamente a la fuente HTML, lo que significa que obtienes una fuente HTML más grande y menos enfocada.
  • Es más difícil obtener datos estructurados : los datos estructurados deberán ser HTML válidos; de lo contrario, tendrá que escapar y convertir las cadenas usted mismo.
  • Acopla perfectamente PHP a su lógica de datos : debido a que PHP se usa en la presentación, no puede separarlos de manera limpia.

Ejemplo de implementación

Con esto,la idea es crear algún tipo de elemento que no se muestre al usuario,pero que sea visible para JavaScript.

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3.Haga eco de los datos directamente a JavaScript

Esto es probablemente lo más fácil de entender.

Pros

  • Muy fácil de implementar : se necesita muy poco para implementar esto y comprenderlo.
  • No ensucia la fuente : las variables se envían directamente a JavaScript, por lo que el DOM no se ve afectado.

Cons

  • Acopla perfectamente PHP a su lógica de datos : debido a que PHP se usa en la presentación, no puede separarlos de manera limpia.

Ejemplo de implementación

La aplicación es relativamente sencilla:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

¡Buena suerte!




Answer 2 Benjamin Gruenbaum


Voy a intentar una respuesta más simple:

Explicación del problema

Primero,entendamos el flujo de eventos cuando una página es servida desde nuestro servidor:

  • Primero se ejecuta PHP,que genera el HTML que se sirve al cliente.
  • Luego,el HTML es entregado al cliente,después de que PHP haya terminado con él,me gustaría enfatizar que una vez que el código sale del servidor-PHP ha terminado con él y ya no puede acceder a él.
  • Entonces,el HTML con JavaScript llega al cliente,que puede ejecutar JavaScript en ese HTML.

Entonces, realmente, lo más importante para recordar aquí es que HTTP no tiene estado . Una vez que una solicitud abandona el servidor, el servidor no puede tocarla. Entonces, eso deja nuestras opciones para:

  1. Envíe más solicitudes del cliente después de que se realice la solicitud inicial.
  2. Codifica lo que el servidor tenía que decir en la solicitud inicial.

Solutions

Esa es la pregunta central que deberías hacerte a ti mismo:

¿Estoy escribiendo una página web o una solicitud?

Los sitios web están principalmente basados en páginas,y los tiempos de carga de las páginas deben ser lo más rápido posible (por ejemplo-Wikipedia).Las aplicaciones web son más pesadas AJAX y realizan muchos viajes de ida y vuelta para obtener el cliente información rápida (por ejemplo-un tablero de acciones).

Website

El envío de más solicitudes del cliente después de que se realiza la solicitud inicial es lento, ya que requiere más solicitudes HTTP que tienen una sobrecarga significativa. Además, requiere asincronía, ya que hacer una solicitud AJAX requiere un controlador para cuando esté completo.

No recomendaría hacer otra solicitud a menos que su sitio sea una aplicación para obtener esa información del servidor.

Desea tiempos de respuesta rápidos que tengan un gran impacto en los tiempos de conversión y carga. Hacer solicitudes de Ajax es lento para el tiempo de actividad inicial en este caso e innecesario.

Tienes dos maneras de abordar el tema

  • Establecer una cookie : las cookies son encabezados enviados en solicitudes HTTP que tanto el servidor como el cliente pueden leer.
  • Codifique la variable como JSON : JSON se parece mucho a los objetos JavaScript y la mayoría de los objetos JSON son variables válidas de JavaScript.

Configurar una cookie realmente no es muy difícil, solo debe asignarle un valor:

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

Luego, puede leerlo con JavaScript usando document.cookie :

Aquí hay un parser corto rodado a mano,pero la respuesta que enlacé justo encima de esto tiene otras más probadas:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

Las galletas son buenas para un poco de información.Esto es lo que los servicios de rastreo hacen a menudo.

Una vez que tengamos más datos,podemos codificarlos con JSON dentro de una variable de JavaScript:

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

Suponiendo que $value es json_encode capaz en el lado de PHP (generalmente lo es). Esta técnica es lo que hace Stack Overflow con su chat, por ejemplo (solo usando .NET en lugar de PHP).

Application

Si estás escribiendo una aplicación-de repente el tiempo de carga inicial no siempre es tan importante como el rendimiento continuo de la aplicación,y empieza a dar sus frutos para cargar los datos y el código por separado.

Mi respuesta aquí explica cómo cargar datos usando AJAX en JavaScript:

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

O con jQuery:

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

Ahora, el servidor solo necesita contener una /your/url route / file que contenga código que tome los datos y haga algo con ellos, en su caso:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

De esta manera,nuestro archivo JavaScript pide los datos y los muestra en lugar de pedir el código o el diseño.Esto es más limpio y empieza a dar sus frutos a medida que la aplicación va subiendo.También es una mejor separación de las preocupaciones y permite probar el código del lado del cliente sin ninguna tecnología del lado del servidor involucrada,lo cual es otra ventaja.

Postdata: debe ser muy consciente de los vectores de ataque XSS cuando inyecta cualquier cosa desde PHP a JavaScript. Es muy difícil escapar de los valores correctamente y es sensible al contexto. Si no está seguro de cómo lidiar con XSS, o no lo sabe, lea este artículo de OWASP , este y esta pregunta .




Answer 3 yuikonnu


Normalmente utilizo atributos de data-*en HTML.

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Variable "service" now contains the value of $myService->getValue();
        });
    });
</script>

Este ejemplo utiliza jQuery,pero puede ser adaptado para otra biblioteca o JavaScript vainilla.

Puede leer más sobre la propiedad del conjunto de datos aquí: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset




Answer 4 Jessé Catrinck


<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode()requiere:

  • PHP 5.2.0 o más
  • $PHPVar codificado como UTF-8, Unicode.



Answer 5 Nishant Mendiratta


Simplemente use uno de los siguientes métodos.

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

OR

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>