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

Tengo un código que se ve así:

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

Tengo un código JavaScript que necesita valy 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>

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

En ningún orden en particular:

1. Use AJAX para obtener los datos que necesita del servidor.
2. Haga eco de los datos en la página en algún lugar y use JavaScript para obtener la información del DOM.
3. Echo los datos directamente a JavaScript.

En esta publicación, examinaremos cada uno de los métodos anteriores y veremos los pros y los contras de cada uno, así como también cómo implementarlos.

1. Use AJAX para obtener los datos que necesita 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 de datos asincrónica : 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.

Contras

• 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 incrustar 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 implementacion

Con AJAX, necesita 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 real)

<!-- 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á 42cuando el archivo termine de cargarse.

Un poco más de material de lectura

• Usando XMLHttpRequest - MDN
• Referencia de objeto XMLHttpRequest - MDN
• ¿Cómo devuelvo la respuesta de una llamada asincrónica?

2. Haga eco de los datos en la página en algún lugar y use 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.

Contras

• Marcado potencialmente no semántico : por lo general, lo que sucede es que usas algún tipo de información <input type=hidden>para almacenar la información, porque es más fácil obtenerla inputNode.value, pero hacerlo significa que tienes un elemento sin sentido en tu HTML. HTML tiene el <meta>elemento para datos sobre el documento, y HTML 5 introduce data-*atributos 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 tendrán que ser HTML válido, 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 implementacion

Con esto, la idea es crear algún tipo de elemento que no se mostrará 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. Hacer eco de los datos directamente a JavaScript

Este es probablemente el 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.

Contras

• 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 implementacion

La implementació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!

Voy a intentar una respuesta más simple:

Explicación del problema.

Primero, comprendamos el flujo de eventos cuando se sirve una página desde nuestro servidor:

• Primero se ejecuta PHP, genera el HTML que se sirve al cliente.
• Luego, el HTML se entrega al cliente, una vez que PHP termina con él, me gustaría enfatizar que una vez que el código abandona el servidor, PHP termina con él y ya no puede acceder a él.
• Luego, 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. Enviar más solicitudes del cliente después de que se realiza la solicitud inicial.
2. Codifique lo que el servidor tenía que decir en la solicitud inicial.

Soluciones

Esa es la pregunta central que debe hacerse es:

¿Estoy escribiendo un sitio web o una aplicación?

Los sitios web se basan principalmente en páginas, y los tiempos de carga de la página deben ser lo más rápidos posible (por ejemplo, Wikipedia). Las aplicaciones web son más pesadas en AJAX y realizan muchos viajes de ida y vuelta para obtener información rápida del cliente (por ejemplo, un tablero de valores).

Sitio web

Enviar 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 realizar una solicitud AJAX requiere un controlador para cuando se complete.

Yo no recomendaría hacer una nueva solicitud a menos que su sitio es una aplicación para conseguir que la 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 formas de abordar el problema

• 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 no es realmente muy difícil, solo tiene que 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 breve analizador enrollado a mano, pero la respuesta que vinculé justo encima de esta tiene mejores resultados:

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 cookies son buenas para algunos datos. Esto es lo que a menudo hacen los servicios de rastreo.

Una vez que tenemos 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 $valuees json_encodecapaz 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).

Solicitud

Si está 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 comienza a dar frutos para cargar datos y códigos 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/urlruta / archivo 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 solicita los datos y los muestra en lugar de solicitar el código o el diseño. Esto es más limpio y comienza a dar sus frutos a medida que la aplicación aumenta. También es una mejor separación de preocupaciones y permite probar el código del lado del cliente sin ninguna tecnología del lado del servidor, 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 .

Usualmente uso los atributos 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 usa jQuery, pero se puede adaptar 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

<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.

Simplemente use uno de los siguientes métodos.

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

O

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

Me gusta mucho la forma en que WordPress funciona con sus funciones en cola y localización , por lo que siguiendo ese modelo, escribí una clase simple para poner una secuencia de comandos en la página de acuerdo con las dependencias de la secuencia de comandos, y para hacer que los datos adicionales estén disponibles para la secuencia de comandos.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

La llamada a la enqueue_script()función es para agregar secuencias de comandos, establecer el origen y las dependencias de otras secuencias de comandos y los datos adicionales necesarios para la secuencia de comandos.

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

Y, el print_scripts()método del ejemplo anterior enviará esta salida:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

Independientemente del hecho de que el script 'jquery' está en cola después de 'jquery-ui', se imprime antes porque se define en 'jquery-ui' que depende de 'jquery'. Los datos adicionales para el 'script personalizado' están dentro de un nuevo bloque de script y se colocan frente a él, contiene un mydataobjeto que contiene datos adicionales, ahora disponibles para 'script personalizado'.

Prueba esto:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

-

-Después de intentar esto por un tiempo

Aunque funciona, sin embargo, ralentiza el rendimiento. Como PHP es un script del lado del servidor, mientras que JavaScript es un lado del usuario.

myPlugin.start($val); // Tried this, didn't work

No funciona porque $valno está definido en lo que respecta a JavaScript, es decir, el código PHP no generó nada $val. Intente ver la fuente en su navegador y esto es lo que verá:

myPlugin.start(); // I tried this, and it didn't work

Y

<?php myPlugin.start($val); ?> // This didn't work either

Esto no funciona porque PHP intentará tratarlo myPlugincomo una constante y cuando eso falla tratará de tratarlo como la cadena 'myPlugin'que intentará concatenar con la salida de la función PHPstart() y, dado que no está definida, producirá un error fatal. error.

Y

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

Si bien es probable que esto funcione, dado que el código PHP está produciendo JavaScript válido con los argumentos esperados, si falla, es probable que sea porque myPlugin todavía no está listo. Verifique su orden de ejecución.

También debe tener en cuenta que la salida del código PHP no es segura y debe filtrarse con json_encode().

EDITAR

Porque no noté el paréntesis faltante en myPlugin.start(<?=$val?>: - \

Como señala @Second Rikudo, para que funcione correctamente $valnecesitaría contener el paréntesis de cierre, por ejemplo:$val="42);"

Lo que significa que PHP ahora producirá myPlugin.start(42);y funcionará como se espera cuando se ejecute con el código JavaScript.

He creado un método sencillo para asignar variables de JavaScript utilizando PHP.

Utiliza atributos de datos HTML5 para almacenar variables PHP y luego se asigna a JavaScript en la carga de la página.

Un tutorial completo se puede encontrar aquí .

Ejemplo:

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

Aquí está el código JavaScript

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

1. Convierte los datos en JSON
2. Llame a AJAX para recibir el archivo JSON
3. Convertir JSON en objeto Javascript

Ejemplo:

PASO 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

PASO 2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

Aquí hay uno que no veo publicado como una opción. Es similar a usar Ajax, pero claramente diferente.

Primero, configure la fuente de un script directamente en un archivo PHP.

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

Incluso podría pasar una variable de vuelta al archivo PHP como este ejemplo:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

Luego, en "your_php_file.php":

<?php
    // THIS IS A SIMPLE EXAMPLE
    // it demonstrates one method of using the src attribute to link
    // to a PHP file which can generate JavaScript code dynamically
    // and share data between PHP and JavaScript
    // you may take this learning example and develop it further
    // relying on your own coding skills for validating data
    // and avoiding errors, of course
    header('content-type: text/javascript');

    // If you pass a $_GET variable from the JavaScript
    // you should add code to validate your $_GET variable(s)

    // You can add code to query a database
    // using $_GET['var1'] or some other criteria

    // You can add simple variable assignments
    $value = 'some value';

    // For the OP's needs (assumes the class object has been defined)
    $val = $myService->getValue();
?>

function name() {
    // Pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both PHP and JavaScript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = <?php echo '"' . $val . '"'; ?>;
    var example2 = <?php echo '"' . $value . '"'; ?>;
    var example3 = <?php echo '"some other data"'; ?>;
    alert( example1 + ' / ' + example2 );
}

<?php
    // You may even want to include additional files (.php or .js, etc.)
    @include 'local_path_to_some_other_js_file.js';
    @include 'local_path_to_some_other_php_file.php';

    exit;
?>

Aquí está el truco:

1. Aquí está su 'PHP' para usar esa variable:

   <?php
       $name = 'PHP variable';
       echo '<script>';
       echo 'var name = ' . json_encode($name) . ';';
       echo '</script>';
   ?>

2. Ahora tiene una variable de JavaScript llamada 'name', y aquí está su código JavaScript para usar esa variable:

   <script>
        console.log("I am everywhere " + name);
   </script>

Digamos que su variable es siempre entera. En ese caso, esto es más fácil:

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Salida :

<script>var number = 4;alert(number);</script>

Digamos que su variable no es un número entero, pero si prueba el método anterior obtendrá algo como esto:

<script>var number = abcd;alert(number);</script>

Pero en JavaScript, este es un error de sintaxis.

Entonces, en PHP tenemos una llamada a la función json_encodeque codifica una cadena a un objeto JSON.

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Como abcden JSON es "abcd", se ve así:

<script>var number = "abcd";alert(number);</script>

Puede usar el mismo método para matrices:

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

Y su código JavaScript se ve así:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

Salida de la consola

Después de mucha investigación, descubrí que el método más fácil es pasar todo tipo de variables fácilmente.

En la secuencia de comandos del servidor, tiene dos variables y está intentando enviarlas a las secuencias de comandos del cliente:

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

En cualquiera de sus códigos JavaScript llamados en la página, simplemente llame esas variables.

Asumiré que los datos a transmitir son una cadena.

Como han dicho otros comentaristas, AJAX es una solución posible, pero las desventajas son mayores que las ventajas: tiene una latencia y es más difícil de programar (necesita el código para recuperar el valor tanto del lado del servidor como del lado del cliente), cuando es más simple la función de escape debería ser suficiente.

Entonces, volvimos a escapar. json_encode($string)funciona si codifica la cadena de origen como UTF-8 primero en caso de que aún no lo esté, porque json_encoderequiere datos UTF-8. Si la cadena está en ISO-8859-1, simplemente puede usar json_encode(utf8_encode($string)); de lo contrario siempre puedes usariconv para hacer la conversión primero.

Pero hay un gran problema. Si lo está utilizando en eventos, debe ejecutar htmlspecialchars()el resultado para que el código sea correcto. Y luego debe tener cuidado de usar comillas dobles para encerrar el evento o agregar siempre ENT_QUOTESa htmlspecialchars. Por ejemplo:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

Sin embargo, no puede usar htmlspecialcharscódigo JavaScript normal (código incluido en <script>... </script>etiquetas). Eso hace que esta función sea propensa a errores, olvidandohtmlspecialchars el resultado al escribir el código de evento.

Es posible escribir una función que no tenga ese problema y que se pueda usar tanto en eventos como en código JavaScript normal, siempre que incluya sus eventos siempre entre comillas simples o siempre entre comillas dobles. Aquí está mi propuesta, requiriendo que estén entre comillas dobles (que prefiero):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

La función requiere PHP 5.4+. Ejemplo de uso:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

Según su código

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

Ahora puede obtener valor usando DOM, use innerHTML de span id, en este caso no necesita hacer ninguna llamada al servidor, o Ajax u otra cosa.

Su página la imprimirá usando PHP, y su JavaScript obtendrá valor usando DOM.

<?php

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

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (yourexternal.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

SALIDA

El color manzana es amarillo, el color fresa es rojo y el color kiwi es verde.

Para aquellos que tienen algún problema al usar el siguiente código y sigue mostrándose <?php echo $username?>o algo así, vaya a editar httpd.conf en la sección mime_module agregando esta 'Aplicación AddType / x-httpd-php .html .htm' porque puede estar deshabilitado por defecto.

<?php
    $username = 1;
?>

<script type="text/javascript">
    var myData = <?php echo $username ?>;
    console.log(myData);
    alert(myData);
</script>

Utilizar:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

y eso funcionará Simplemente asigna una variable de JavaScript y luego pasa el valor de una variable PHP existente. Como PHP escribe aquí las líneas de JavaScript, tiene el valor de la variable PHP y puede pasarlo directamente.