Como faço para passar variáveis ​​e dados de PHP para JavaScript?

Question

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

Eu tenho um código parecido com este:

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

Answer 1

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

Em nenhuma ordem particular:

1. Use AJAX para obter os dados de que você precisa do servidor.
2. Faça eco dos dados em algum lugar da página e use JavaScript para obter as informações do DOM.
3. Ecoar os dados diretamente para o JavaScript.

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

1. Use AJAX para obter os dados que você precisa do servidor

Este método é considerado o melhor, porque os scripts do lado do servidor e do lado 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 será necessário alterar muito o código JavaScript.
• Mais legível - JavaScript é JavaScript, PHP é PHP. Sem misturar os dois, você obtém um código mais legível em ambas as linguagens.
• Permite transferência de dados assíncrona - Obter as informações do PHP pode custar tempo / recursos caros. Às vezes, você simplesmente não quer esperar pelas informações, carregar a página e ter as informações sempre disponíveis.
• Os dados não são encontrados diretamente na marcação - Isso significa que sua marcação é mantida limpa de quaisquer dados adicionais e apenas o JavaScript os vê.

Contras

• Latência - AJAX cria uma solicitação HTTP, e as solicitações HTTP são transportadas pela rede e têm latências de rede.
• Estado - os dados buscados por meio de 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-lo de alguma forma. Se você descartou a incorporação de dados na página (o que você fez se estiver usando essa técnica), isso o limitará a cookies / sessões que podem estar sujeitos a condições de corrida.

Exemplo de Implementação

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

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

Mais algum material de leitura

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

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

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

Prós

• Rápido - as operações DOM costumam ser rápidas e você pode armazenar e acessar muitos dados com relativa rapidez.

Contras

• Marcação potencialmente não-semântica - Normalmente, o que acontece é que você usa algum tipo de <input type=hidden>para armazenar as informações, porque é mais fácil extrair as informações inputNode.value, mas fazer isso significa que você tem um elemento sem sentido em seu HTML. HTML possui o <meta>elemento para dados sobre o documento e HTML 5 apresenta data-*atributos para dados especificamente para leitura com JavaScript que podem ser associados a elementos específicos.
• Dirties up the Source - 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 de obter dados estruturados - os dados estruturados terão que ser HTML válidos, caso contrário, você terá que escapar e converter as strings sozinho.
• Acopla fortemente o PHP à sua lógica de dados - como o PHP é usado na apresentação, você não pode separar os dois de forma clara.

Exemplo de Implementação

Com isso, a ideia é criar algum tipo de elemento que não seja exibido para o usuário, mas seja visível para o 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. Echo os dados diretamente para JavaScript

Este é provavelmente o mais fácil de entender.

Prós

• Implementação muito fácil - É preciso muito pouco para implementar e entender.
• Não suja a fonte - as variáveis ​​são enviadas diretamente para o JavaScript, para que o DOM não seja afetado.

Contras

• Acopla fortemente o PHP à sua lógica de dados - como o PHP é usado na apresentação, você não pode separar os dois de forma clara.

Exemplo de Implementação

A implementação é relativamente simples:

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

Boa sorte!

Answer 2

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 é servido ao cliente.
• Então, o HTML é entregue ao cliente, depois que o PHP é feito com ele, eu gostaria de enfatizar que uma vez que o código sai do servidor - o PHP é feito com ele e não pode mais acessá-lo.
• Em seguida, o HTML com JavaScript chega ao cliente, que pode executar o JavaScript nesse HTML.

Então, realmente, o principal a ser lembrado aqui é que o HTTP não tem estado . Depois que uma solicitação sai do servidor, o servidor não pode tocá-la. Então, isso deixa nossas opções para:

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

Soluções

Essa é a questão central que você deve se perguntar:

Estou escrevendo um site ou um aplicativo?

Os sites são principalmente baseados em páginas, e os tempos de carregamento da página devem ser os mais rápidos possíveis (por exemplo - Wikipedia). Os aplicativos da Web são mais pesados ​​com AJAX e realizam muitas viagens de ida e volta para obter informações rápidas do cliente (por exemplo - um painel de estoque).

Local na rede Internet

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

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, que têm um grande impacto nos tempos de conversão e carregamento. Nesse caso, fazer solicitações Ajax é lento para o tempo de atividade inicial e desnecessário.

Você tem duas maneiras de resolver o problema

• Definir um cookie - 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 se parece muito com objetos JavaScript e a maioria dos objetos JSON são variáveis ​​JavaScript válidas.

Definir um cookie não é realmente muito difícil, você apenas atribui a ele um valor:

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

Então, você pode lê-lo com JavaScript usando document.cookie:

Aqui está um analisador sintético resumido, mas a resposta que vinculei acima tem alguns mais bem testados:

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 alguns dados. Isso é o que os serviços de rastreamento costumam fazer.

Assim que 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 é). Esta técnica é o que Stack Overflow faz com seu chat, por exemplo (usando apenas .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ódigo separadamente.

Minha resposta aqui explica como carregar dados usando 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 o código que pega os dados e faz 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 pede os dados e os mostra, em vez de solicitar código ou layout. Isso é mais limpo e começa a render à medida que o aplicativo fica mais alto. É também uma melhor separação de interesses e permite testar o código do lado do cliente sem qualquer tecnologia do lado do servidor envolvida, o que é outra vantagem.

Postscript: você deve estar muito atento aos vetores de ataque XSS ao injetar qualquer coisa de PHP a JavaScript. É muito difícil escapar dos valores corretamente e é sensível ao contexto. Se você não tem certeza de como lidar com o XSS, ou não sabe disso - leia este artigo OWASP , este e esta pergunta .

Answer 3

Eu geralmente uso atributos data- * 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

Answer 4

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

json_encode () requer:

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

Answer 5

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>

Answer 6

Eu gosto bastante da maneira como o WordPress funciona com suas funções de enfileirar e localizar , então seguindo esse modelo, eu 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 fonte 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' estar enfileirado após 'jquery-ui', ele é impresso antes porque está definido em 'jquery-ui' que depende de '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 o mydataobjeto que contém dados adicionais, agora disponíveis para 'script personalizado'.

Answer 7

Experimente isto:

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

-

-Depois de tentar isso por um tempo

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

Answer 8

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 gerou nada para $val. Tente visualizar a fonte em 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, ele tentará tratá-la como a string 'myPlugin'que tentará concatenar com a saída da função PHP start()e, como isso é indefinido, produzirá um erro fatal erro.

E

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

Embora seja mais provável que funcione, visto que 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 não é segura e deve ser filtrada com json_encode().

EDITAR

Porque não notei a falta de parênteses em myPlugin.start(<?=$val?>: - \

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

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

Answer 9

Eu criei 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");
}

Answer 10

1. Converta os dados em JSON
2. Chame 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);
      }
   }
}

Answer 11

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

Primeiro, defina o código-fonte de um script diretamente para um arquivo PHP.

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

Você pode até mesmo passar uma variável de volta para o arquivo PHP, como este exemplo:

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

Então, 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;
?>

Answer 12

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á seu código JavaScript para usar essa variável:

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

Answer 13

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

<?PHP
    $number = 4;

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

Produto :

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

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

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

Mas em JavaScript, esse é um erro de sintaxe.

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

<?PHP
    $number = 'abcd';

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

Como abcdem JSON é "abcd", tem a seguinte aparência:

<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 se parece com este:

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

Saída do console

Answer 14

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

No script do servidor, você tem duas variáveis ​​e está tentando enviá-las aos 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.

Answer 15

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

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

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

Mas há um grande problema. Se estiver usando em eventos, você precisa executar htmlspecialchars()o resultado para torná-lo o código correto. E então você deve ter o cuidado de 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 htmlspecialcharsem código JavaScript normal (código entre tags <script>... </script>). Isso torna o uso desta função sujeito a erros, por esquecer htmlspecialcharso 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 em código JavaScript normal, desde que você coloque seus eventos sempre entre aspas simples ou sempre entre aspas duplas. Aqui está 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>';

Answer 16

De acordo com 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 ou span id, neste caso você não precisa fazer nenhuma chamada para o servidor, ou Ajax ou outra coisa.

Sua página irá imprimi-lo usando PHP, e seu JavaScript obterá valor usando DOM.

Answer 17

<?php

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

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

?>