Eu tenho uma variável em PHP e preciso do seu valor no meu código JavaScript. Como posso obter minha variável de PHP para JavaScript?

Eu tenho um código que se parece com isso:

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

Eu tenho um código JavaScript que precisa vale se parece com:

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

Na verdade, existem várias abordagens para fazer isso. Alguns exigem mais despesas gerais do que outros, e alguns são considerados melhores que outros.

Em nenhuma ordem particular:

1. Use AJAX para obter os dados necessários do servidor.
2. Faça eco dos dados na página em algum lugar e use JavaScript para obter as informações do DOM.
3. Ecoar os dados diretamente para JavaScript.

Nesta postagem, examinaremos cada um dos métodos acima e veremos os prós e os contras de cada um, além de como implementá-los.

1. Use AJAX para obter os dados necessários do servidor

Esse método é considerado o melhor, porque os scripts do lado do servidor e do cliente são completamente separados .

Prós

• Melhor separação entre camadas - se amanhã você parar de usar PHP e quiser mudar para um servlet, uma API REST ou algum outro serviço, não precisará alterar muito do código JavaScript.
• Mais legível - JavaScript é JavaScript, PHP é PHP. Sem misturar os dois, você obtém um código mais legível nos dois idiomas.
• Permite transferência de dados assíncrona - Obter informações do PHP pode levar tempo / recursos caros. Às vezes, você simplesmente não deseja esperar pelas informações, carregar a página e ter essas informações sempre que possível.
• Os dados não são encontrados diretamente na marcação - Isso significa que sua marcação é mantida limpa de quaisquer dados adicionais e somente o JavaScript os vê.

Contras

• Latência - o AJAX cria uma solicitação HTTP, e as solicitações HTTP são transportadas pela rede e possuem latências de rede.
• Estado - Os dados buscados por uma solicitação HTTP separada não incluirão nenhuma informação da solicitação HTTP que buscou o documento HTML. Você pode precisar dessas informações (por exemplo, se o documento HTML for gerado em resposta a um envio de formulário) e, se precisar, terá que transferi-las de alguma forma. Se você descartou a incorporação dos dados na página (que você possui se estiver usando esta técnica), isso o limita a cookies / sessões que podem estar sujeitos às condições da corrida.

Exemplo de Implementação

Com o AJAX, você precisa de duas páginas, uma é onde o PHP gera a saída e a segunda é onde o JavaScript obtém essa saída:

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 (ou qualquer que seja o nome da página atual)

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

A combinação acima dos dois arquivos alertará 42 quando o arquivo terminar de carregar.

Um pouco mais de material de leitura

• Usando XMLHttpRequest - MDN
• Referência de objeto XMLHttpRequest - MDN
• Como faço para retornar a resposta de uma chamada assíncrona?

2. Faça eco dos dados na página em algum lugar e use JavaScript para obter as informações do DOM

Este método é menos preferível ao AJAX, mas ainda tem suas vantagens. Ainda é relativamente separado entre PHP e JavaScript, no sentido de que não há PHP diretamente no JavaScript.

Prós

• Rápido - as operações do DOM geralmente são rápidas e você pode armazenar e acessar muitos dados de forma relativamente rápida.

Contras

• Marcação potencialmente anti-semântica - Normalmente, o que acontece é que você usa algum tipo de <input type=hidden>armazenamento de informações, porque é mais fácil obtê-las inputNode.value, mas isso significa que você tem um elemento sem sentido no HTML. O HTML possui o <meta>elemento para dados sobre o documento, e o HTML 5 apresenta data-*atributos para dados especificamente para leitura com JavaScript que podem ser associados a elementos específicos.
• Sujeira na fonte - os dados que o PHP gera são enviados diretamente para a fonte HTML, o que significa que você obtém uma fonte HTML maior e menos focada.
• Mais difícil obter dados estruturados - Os dados estruturados precisarão ser HTML válido, caso contrário, você precisará escapar e converter as strings por conta própria.
• Combina firmemente o PHP à sua lógica de dados - Como o PHP é usado na apresentação, você não pode separar os dois corretamente.

Exemplo de Implementação

Com isso, a idéia é criar algum tipo de elemento que não será exibido ao usuário, mas é visível no 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. Faça eco dos dados diretamente no JavaScript

Este é provavelmente o mais fácil de entender.

Prós

• Muito fácil de implementar - é preciso muito pouco para implementar isso e entender.
• Fonte não suja - as variáveis ​​são enviadas diretamente para JavaScript, portanto, o DOM não é afetado.

Contras

• Combina firmemente o PHP à sua lógica de dados - Como o PHP é usado na apresentação, você não pode separar os dois corretamente.

Exemplo de Implementação

A implementação é relativamente direta:

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

Boa sorte!

Vou tentar uma resposta mais simples:

Explicação do problema

Primeiro, vamos entender o fluxo de eventos quando uma página é veiculada em nosso servidor:

• Primeiro, o PHP é executado, ele gera o HTML que é veiculado no cliente.
• Então, o HTML é entregue ao cliente, depois que o PHP é concluído, eu gostaria de enfatizar que quando o código sai do servidor - o PHP é finalizado e não pode mais acessá-lo.
• Em seguida, o HTML com JavaScript chega ao cliente, que pode executar o JavaScript nesse HTML.

Realmente, a principal coisa a lembrar aqui é que o HTTP é sem estado . Depois que uma solicitação sai do servidor, o servidor não pode tocá-lo. Então, isso deixa nossas opções para:

1. Envie mais solicitações do cliente após a da solicitação inicial.
2. Codifique o que o servidor tinha a dizer na solicitação inicial.

Soluções

Essa é a pergunta principal que você deve se perguntar:

Estou escrevendo um site ou aplicativo?

Os sites são baseados principalmente em páginas e o tempo de carregamento da página precisa ser o mais rápido possível (por exemplo - Wikipedia). Os aplicativos da Web são mais pesados ​​para o AJAX e realizam várias viagens de ida e volta para obter informações rápidas do cliente (por exemplo - um painel de ações).

Local na rede Internet

O envio de mais solicitações do cliente após a conclusão da solicitação inicial é lento , pois requer mais solicitações HTTP com sobrecarga significativa. Além disso, requer assincronicidade, pois fazer uma solicitação AJAX requer um manipulador para quando estiver completo.

Eu não recomendaria fazer outra solicitação, a menos que seu site seja um aplicativo para obter essas informações do servidor.

Você deseja tempos de resposta rápidos, com uma enorme impacto nos tempos de conversão e carregamento. Fazer solicitações do Ajax é lento para o tempo de atividade inicial nesse caso e desnecessário.

Você tem duas maneiras de resolver o problema

• Definir um cookie - os cookies são cabeçalhos enviados em solicitações HTTP que o servidor e o cliente podem ler.
• Codifique a variável como JSON - JSON parece muito próximo aos objetos JavaScript e a maioria dos objetos JSON são variáveis ​​JavaScript válidas.

Definir um cookie não é realmente muito difícil, basta atribuir um valor a ele:

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

Em seguida, você pode lê-lo com JavaScript usandodocument.cookie :

Aqui está um analisador de rolagem manual, mas a resposta que eu vinculei logo acima tem os melhores:

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.

Os cookies são bons para um pouco de dados. É isso que os serviços de rastreamento costumam fazer.

Quando tivermos mais dados, podemos codificá-los com JSON dentro de uma variável JavaScript:

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

Supondo que $valueseja json_encodecapaz no lado do PHP (geralmente é). Essa técnica é o que o Stack Overflow faz com seu bate-papo, por exemplo (apenas usando .NET em vez de PHP).

Inscrição

Se você estiver escrevendo um aplicativo - de repente, o tempo de carregamento inicial nem sempre é tão importante quanto o desempenho contínuo do aplicativo e começa a valer a pena carregar dados e códigos separadamente.

Minha resposta aqui explica como carregar dados usando o AJAX em 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();

Ou com jQuery:

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

Agora, o servidor só precisa conter uma /your/urlrota / arquivo que contenha código que pegue os dados e faça algo com eles, no seu caso:

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

Dessa forma, nosso arquivo JavaScript solicita os dados e os mostra em vez de solicitar código ou layout. Isso é mais limpo e começa a valer a pena à medida que o aplicativo aumenta. Também é uma melhor separação de preocupações e permite testar o código do lado do cliente sem a necessidade de qualquer tecnologia do servidor, o que é outra vantagem.

Postscript: Você deve estar muito ciente dos vetores de ataque XSS ao injetar algo do PHP ao JavaScript. É muito difícil escapar dos valores corretamente e é sensível ao contexto. Se você não tiver certeza de como lidar com o XSS ou não o conhecer - leia este artigo da OWASP , esta e esta pergunta .

Eu normalmente uso atributos de dados * em 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 exemplo usa jQuery, mas pode ser adaptado para outra biblioteca ou JavaScript vanilla.

Você pode ler mais sobre a propriedade do conjunto de dados aqui: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

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

json_encode () requer:

• PHP 5.2.0 ou mais
• $PHPVar codificado como UTF-8, Unicode.

Basta usar um dos seguintes métodos.

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

OU

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

Eu gosto bastante da maneira como o WordPress trabalha com suas funções de enfileiramento e localização , então, seguindo esse modelo, escrevi uma classe simples para colocar scripts na página de acordo com as dependências do script e para disponibilizar dados adicionais para o 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;
        }
    }
}

A chamada para a enqueue_script()função é para adicionar script, definir a origem e dependências em outros scripts e dados adicionais necessários para o 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();

E, o print_scripts()método do exemplo acima enviará esta saída:

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

Independentemente do fato de o script 'jquery' ser colocado na fila após o 'jquery-ui', ele é impresso anteriormente porque está definido em 'jquery-ui' que depende do 'jquery'. Dados adicionais para o 'script personalizado' estão dentro de um novo bloco de script e são colocados na frente dele; ele contém mydataobjetos que contêm dados adicionais, agora disponíveis para 'script personalizado'.

Tente o seguinte:

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

-

-Depois de tentar isso por um tempo

Embora funcione, no entanto, diminui o desempenho. Como o PHP é um script do lado do servidor, enquanto o JavaScript é do lado do usuário.

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

Não funciona porque $valé indefinido no que diz respeito ao JavaScript, ou seja, o código PHP não produziu nada para ele $val. Tente visualizar a fonte no seu navegador e aqui está o que você verá:

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

E

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

Isso não funciona porque o PHP tentará tratar myPlugincomo uma constante e, quando isso falhar, tentará tratá-lo como a string 'myPlugin'que tentará concatenar com a saída da função PHP start()e, como isso é indefinido, produzirá um fatal erro.

E

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

Embora seja mais provável que funcione, como o código PHP está produzindo JavaScript válido com os argumentos esperados, se falhar, é provável que seja porque myPluginainda não está pronto. Verifique sua ordem de execução.

Além disso, você deve observar que a saída do código PHP é insegura e deve ser filtrada com json_encode().

EDITAR

Porque eu não notei o parêntese ausente em myPlugin.start(<?=$val?>: - \

Como o @Second Rikudo salienta, para funcionar corretamente $valseria necessário conter o parêntese de fechamento, por exemplo:$val="42);"

Isso significa que o PHP agora produzirá myPlugin.start(42);e funcionará conforme o esperado quando executado pelo código JavaScript.

Eu vim com um método fácil para atribuir variáveis ​​JavaScript usando PHP.

Ele usa atributos de dados HTML5 para armazenar variáveis ​​PHP e, em seguida, é atribuído ao JavaScript no carregamento da página.

Um tutorial completo pode ser encontrado aqui .

Exemplo:

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

Aqui está o 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. Converta os dados em JSON
2. Ligue para o AJAX para receber o arquivo JSON
3. Converter JSON em objeto Javascript

Exemplo:

PASSO 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();
?>

PASSO 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);
      }
   }
}

Aqui está um que eu não vejo postado como uma opção. É semelhante ao uso do Ajax, mas claramente diferente.

Primeiro, defina a fonte de um script diretamente para um arquivo PHP.

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

Você pode até passar uma variável de volta ao arquivo PHP, como neste exemplo:

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

Em seguida, em "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;
?>

Aqui está o truque:

1. Aqui está o seu 'PHP' para usar essa variável:

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

2. Agora você tem uma variável JavaScript chamada 'name'e aqui está o seu código JavaScript para usar essa variável:

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

Digamos que sua variável seja sempre inteira. Nesse caso, isso é mais fácil:

<?PHP
    $number = 4;

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

Saída :

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

Digamos que sua variável não seja um número inteiro, mas se você tentar o método acima, obterá algo como isto:

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

Mas em JavaScript, este é um erro de sintaxe.

Portanto, no PHP, temos uma chamada de função json_encodeque codifica string para um objeto JSON.

<?PHP
    $number = 'abcd';

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

Como abcdno JSON é "abcd", fica assim:

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

Você pode usar o mesmo método para matrizes:

<?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>';
?>

E seu código JavaScript fica assim:

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

Saída do console

Após muita pesquisa, descobri que o método mais fácil é passar todos os tipos de variáveis ​​facilmente.

No script do servidor, você tem duas variáveis ​​e está tentando enviá-las para os scripts do 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>';

Em qualquer código JavaScript chamado na página, basta chamar essas variáveis.

Vou assumir que os dados a transmitir são uma string.

Como outros comentadores declararam, o AJAX é uma solução possível, mas os contras superam os profissionais: ele possui uma latência e é mais difícil de programar (ele precisa do código para recuperar o valor no servidor e no cliente), quando é mais simples. a função de escape deve ser suficiente.

Então, voltamos a escapar. json_encode($string)funciona se você codificar a sequência de origem como UTF-8 primeiro, caso ainda não o seja, porque json_encoderequer dados UTF-8. Se a sequência estiver na ISO-8859-1, você poderá simplesmente usar json_encode(utf8_encode($string)); caso contrário, você sempre pode usar iconvpara fazer a conversão primeiro.

Mas há uma grande pegadinha. Se você o estiver usando em eventos, precisará executar htmlspecialchars()o resultado para torná-lo o código correto. E então você deve ter cuidado ao usar aspas duplas para incluir o evento ou sempre adicionar ENT_QUOTESa htmlspecialchars. Por exemplo:

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

No entanto, você não pode usar htmlspecialcharso código JavaScript comum (código incluído em <script>... </script>tags). Isso faz com que essa função seja propensa a erros, esquecendo-se dehtmlspecialchars o resultado ao escrever o código do evento.

É possível escrever uma função que não tenha esse problema e pode ser usada tanto em eventos quanto no código JavaScript comum, desde que você coloque seus eventos sempre entre aspas simples ou sempre entre aspas duplas. Aqui está a minha proposta, exigindo que eles estejam entre aspas duplas (o que eu prefiro):

<?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'";
    }

A função requer PHP 5.4+. Exemplo 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>';

Conforme seu código

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

Agora você pode obter valor usando DOM, use innerHTML do span id, neste caso você não precisa fazer nenhuma chamada para o servidor, ou Ajax ou outra coisa.

Sua página será impressa em PHP e o JavaScript obterá valor usando o 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'] + ".");

RESULTADO

A cor da maçã é amarela, a cor do morango é vermelha e a cor do kiwi é verde.

Para aqueles que têm algum problema ao usar o código abaixo e ele continua aparecendo <?php echo $username?>ou algo assim, edite o httpd.conf na seção mime_module e adicione este 'aplicativo AddType / x-httpd-php .html .htm', pois ele pode estar desabilitado por padrão.

<?php
    $username = 1;
?>

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

Usar:

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

e isso vai funcionar. É apenas atribuir uma variável JavaScript e depois passar o valor de uma variável PHP existente. Como o PHP grava as linhas JavaScript aqui, ele tem o valor da variável PHP e pode transmiti-lo diretamente.