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 parece a esto:

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

Tengo un código JavaScript que necesita valy se ve en las líneas 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, existen 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. Utilice 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. Haga eco de los datos directamente en 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 cómo implementarlos.

1. Utilice 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 o algún 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, obtiene 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 en cualquier momento.
• Los datos no se encuentran directamente en el marcado : esto significa que su marcado se mantiene limpio de cualquier dato adicional y solo JavaScript lo ve.

Contras

• Latencia : AJAX crea una solicitud HTTP y las solicitudes HTTP se transmiten 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 obtuvo el documento HTML. Es posible que necesite esta información (por ejemplo, si el documento HTML se genera en respuesta al envío de un formulario) y, si lo necesita, 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 cookies / sesiones que pueden estar sujetas a condiciones de carrera.

Ejemplo de implementación

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.

Más material de lectura

• Usando XMLHttpRequest - MDN
• Referencia del 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 son a menudo rápidas y puede almacenar y acceder a una gran cantidad de datos con relativa rapidez.

Contras

• 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 obtener la información inputNode.value, pero hacerlo significa que tiene un elemento sin sentido en su HTML. HTML tiene el <meta>elemento para los datos sobre el documento, y HTML 5 introduce data-*atributos para los datos específicamente para leer con JavaScript que se pueden asociar con elementos particulares.
• Suciedad de la fuente : los datos que genera PHP se envían directamente a la fuente HTML, lo que significa que obtiene 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 cadenas usted mismo.
• Acopla firmemente PHP a su lógica de datos : debido a que PHP se usa en la presentación, no puede separar los dos claramente.

Ejemplo de implementación

Con esto, la idea es crear algún tipo de elemento que no será mostrado al usuario, pero sí 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 en JavaScript

Este es probablemente el más fácil de entender.

Pros

• Implementado muy fácilmente : 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 firmemente PHP a su lógica de datos : debido a que PHP se usa en la presentación, no puede separar los dos claramente.

Ejemplo de implementación

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 una página es servida desde nuestro servidor:

• Primero se ejecuta PHP, genera el HTML que se sirve al cliente.
• Luego, el HTML se entrega al cliente, después de que PHP termina con él, me gustaría enfatizar que una vez que el código sale del 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 principal a recordar aquí es que HTTP no tiene estado . Una vez que una solicitud salió del servidor, el servidor no puede tocarla. Entonces, eso deja nuestras opciones para:

1. Envíe más solicitudes del cliente una vez realizada la solicitud inicial.
2. Codifique lo que el servidor tuvo que decir en la solicitud inicial.

Soluciones

Esa es la pregunta central que debería hacerse:

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

Los sitios web se basan principalmente en páginas y los tiempos de carga de las páginas 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 panel de control 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 esté completa.

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.

Quiere tiempos de respuesta rápidos que tengan un gran impacto en los tiempos de conversión y carga. Hacer solicitudes 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 de JavaScript y la mayoría de los objetos JSON son variables de JavaScript válidas.

Configurar una cookie no es realmente muy difícil, simplemente le asigna un valor:

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

Luego, puede ¿Cuál es la función más corta para leer una cookie por su nombre en JavaScript? usando document.cookie:

Aquí hay un analizador breve enrollado a mano, pero la respuesta a la que vinculé justo arriba tiene mejores 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 cookies sirven para algunos datos. Esto es lo que suelen hacer los servicios de seguimiento.

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

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

Suponiendo $valueque json_encodepueda 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 sus frutos cargar datos y 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/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 pedir código o diseño. Esto es más limpio y comienza a dar sus frutos a medida que aumenta la aplicación. 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 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 tratar con XSS, o no lo sabe, lea este artículo de OWASP , este y esta pregunta .

Usualmente uso 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 vanilla.

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 bastante la forma en que WordPress funciona con sus funciones de poner en cola y localizar , así que siguiendo ese modelo, escribí una clase simple para poner un script en la página de acuerdo con las dependencias del script y para hacer que los datos adicionales estén disponibles para el script.

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 un script, establecer la fuente y las dependencias de otros scripts y los datos adicionales necesarios para el script.

$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 está definido en 'jquery-ui' que depende de 'jquery'. Los datos adicionales para el 'script personalizado' se encuentran dentro de un nuevo bloque de script y se colocan delante de é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 del 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 produjo nada para $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 falle, intentará tratarlo como la cadena 'myPlugin'que intentará concatenar con la salida de la función PHP start()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 más probable que esto funcione, dado que el código PHP está produciendo JavaScript válido con los argumentos esperados, si falla, es probable que myPluginaún no esté listo. Consulta tu orden de ejecución.

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

EDITAR

Porque no noté el paréntesis que faltaba 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 esperaba cuando lo ejecute el código JavaScript.

He encontrado un método fácil para asignar variables de JavaScript usando PHP.

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

Puede encontrar un tutorial completo 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. Convierta los datos en JSON
2. Llame a AJAX para recibir el archivo JSON
3. Convierta JSON en un 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, establezca 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 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 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 siempre es un número entero. 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, esto es un error de sintaxis.

Entonces, en PHP tenemos una llamada de 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>';
?>

Dado que 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 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 su código JavaScript llamado en la página, simplemente llame a 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 superan a 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 cliente), cuando es más simple la función de escape debería ser suficiente.

Entonces, volvemos 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 puede utilizar iconvpara realizar la conversión primero.

Pero hay un gran problema. Si lo está utilizando en eventos, debe ejecutar htmlspecialchars()el resultado para que sea el código correcto. Y luego debe tener cuidado de usar comillas dobles para encerrar el evento, o siempre agregar 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 se puede utilizar htmlspecialcharsen código JavaScript normal (código incluido entre etiquetas <script>... </script>). Eso hace que el uso de esta función sea propenso a errores, al olvidar htmlspecialcharsel resultado al escribir el código del evento.

Es posible escribir una función que no tenga ese problema, y ​​se puede usar tanto en eventos como en código JavaScript regular, 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+. Uso de ejemplo:

<?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 lo 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> ";

?>