Come faccio a passare variabili e dati da PHP a JavaScript?

Question

Ho una variabile in PHP e ho bisogno del suo valore nel mio codice JavaScript. Come posso ottenere la mia variabile da PHP a JavaScript?

Ho un codice simile a questo:

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

Ho codice JavaScript che ha bisogno vale sembra sulla falsariga di:

<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

In realtà ci sono diversi approcci per farlo. Alcuni richiedono più overhead di altri e alcuni sono considerati migliori di altri.

Senza un ordine particolare:

1. Usa AJAX per ottenere i dati di cui hai bisogno dal server.
2. Echo i dati nella pagina da qualche parte e usa JavaScript per ottenere le informazioni dal DOM.
3. Echo i dati direttamente in JavaScript.

In questo post, esamineremo ciascuno dei metodi precedenti e vedremo i pro ei contro di ciascuno, nonché come implementarli.

1. Utilizzare AJAX per ottenere i dati necessari dal server

Questo metodo è considerato il migliore, perché gli script lato server e lato client sono completamente separati .

Professionisti

• Migliore separazione tra i livelli : se domani smetti di utilizzare PHP e desideri passare a un servlet, a un'API REST o a qualche altro servizio, non devi modificare gran parte del codice JavaScript.
• Più leggibile : JavaScript è JavaScript, PHP è PHP. Senza mescolare i due, ottieni un codice più leggibile su entrambe le lingue.
• Consente il trasferimento asincrono dei dati : ottenere le informazioni da PHP potrebbe richiedere molto tempo e risorse. A volte semplicemente non vuoi aspettare le informazioni, caricare la pagina e avere le informazioni a portata di mano in qualsiasi momento.
• I dati non vengono trovati direttamente nel markup - Ciò significa che il tuo markup viene mantenuto pulito da eventuali dati aggiuntivi e solo JavaScript lo vede.

Contro

• Latenza : AJAX crea una richiesta HTTP e le richieste HTTP vengono trasferite sulla rete e hanno latenze di rete.
• Stato : i dati recuperati tramite una richiesta HTTP separata non includeranno alcuna informazione dalla richiesta HTTP che ha recuperato il documento HTML. Potresti aver bisogno di queste informazioni (ad esempio, se il documento HTML viene generato in risposta all'invio di un modulo) e, se lo fai, dovrai trasferirle in qualche modo. Se hai escluso l'incorporamento dei dati nella pagina (che hai se stai utilizzando questa tecnica), ciò ti limita a cookie / sessioni che potrebbero essere soggetti a condizioni di gara.

Esempio di implementazione

Con AJAX, hai bisogno di due pagine, una è dove PHP genera l'output e la seconda è dove JavaScript ottiene quell'output:

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 qualunque sia il nome della pagina effettiva)

<!-- 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 combinazione di cui sopra dei due file avviserà 42quando il file termina il caricamento.

Altro materiale da leggere

• Utilizzando XMLHttpRequest - MDN
• Riferimento all'oggetto XMLHttpRequest - MDN
• Come restituisco la risposta da una chiamata asincrona?

2. Echo i dati nella pagina da qualche parte e usa JavaScript per ottenere le informazioni dal DOM

Questo metodo è meno preferibile ad AJAX, ma ha comunque i suoi vantaggi. È ancora relativamente separato tra PHP e JavaScript, nel senso che non c'è PHP direttamente in JavaScript.

Professionisti

• Veloce : le operazioni DOM sono spesso rapide e puoi archiviare e accedere a molti dati in tempi relativamente brevi.

Contro

• Markup potenzialmente antisemantico - Di solito, ciò che accade è che usi una sorta di <input type=hidden>per memorizzare le informazioni, perché è più facile ottenere le informazioni da inputNode.value, ma farlo significa che hai un elemento senza significato nel tuo HTML. HTML ha l' <meta>elemento per i dati sul documento e HTML 5 introduce data-*attributi per i dati specifici per la lettura con JavaScript che possono essere associati a particolari elementi.
• Sporca la fonte : i dati generati da PHP vengono inviati direttamente alla fonte HTML, il che significa che ottieni una fonte HTML più grande e meno focalizzata.
• È più difficile ottenere dati strutturati: i dati strutturati dovranno essere HTML valido, altrimenti dovrai eseguire l'escape e convertire le stringhe da solo.
• Associa strettamente PHP alla logica dei dati : poiché PHP viene utilizzato nella presentazione, non è possibile separare i due in modo pulito.

Esempio di implementazione

Con questo, l'idea è di creare una sorta di elemento che non sarà mostrato all'utente, ma è visibile a 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 i dati direttamente in JavaScript

Questo è probabilmente il più facile da capire.

Professionisti

• Implementazione molto semplice : ci vuole pochissimo per implementarlo e capirlo.
• Non sporca la sorgente : le variabili vengono inviate direttamente a JavaScript, quindi il DOM non è interessato.

Contro

• Associa strettamente PHP alla logica dei dati : poiché PHP viene utilizzato nella presentazione, non è possibile separare i due in modo pulito.

Esempio di implementazione

L'implementazione è relativamente semplice:

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

In bocca al lupo!

Answer 2

Proverò una risposta più semplice:

Spiegazione del problema

Innanzitutto, comprendiamo il flusso degli eventi quando una pagina viene servita dal nostro server:

• Per prima cosa viene eseguito PHP, che genera l'HTML che viene servito al client.
• Quindi, l'HTML viene consegnato al client, dopo che PHP ha finito con esso, vorrei sottolineare che una volta che il codice lascia il server - PHP ha finito con esso e non può più accedervi.
• Quindi, l'HTML con JavaScript raggiunge il client, che può eseguire JavaScript su quell'HTML.

Quindi, in realtà, la cosa principale da ricordare qui è che HTTP è senza stato . Una volta che una richiesta ha lasciato il server, il server non può toccarla. Quindi, questo lascia le nostre opzioni a:

1. Invia più richieste dal client dopo che la richiesta iniziale è stata eseguita.
2. Codifica ciò che il server aveva da dire nella richiesta iniziale.

Soluzioni

Questa è la domanda principale che dovresti chiederti è:

Sto scrivendo un sito web o un'applicazione?

I siti web sono principalmente basati su pagine e i tempi di caricamento della pagina devono essere i più rapidi possibile (ad esempio - Wikipedia). Le applicazioni Web sono più pesanti per AJAX ed eseguono molti round trip per ottenere rapidamente le informazioni del client (ad esempio, un dashboard di magazzino).

Sito web

L'invio di più richieste dal client dopo che la richiesta iniziale è stata eseguita è lento poiché richiede più richieste HTTP che hanno un sovraccarico significativo. Inoltre, richiede asincrono in quanto la creazione di una richiesta AJAX richiede un gestore per quando è completa.

Vorrei non consiglierei di effettuare una nuova richiesta a meno che il sito è un'applicazione per ottenere le informazioni dal server.

Desideri tempi di risposta rapidi che abbiano un enorme impatto sui tempi di conversione e caricamento. L'esecuzione di richieste Ajax è lenta per il tempo di attività iniziale in questo caso e non necessaria.

Hai due modi per affrontare il problema

• Imposta un cookie : i cookie sono intestazioni inviate in richieste HTTP che possono essere lette sia dal server che dal client.
• Codifica la variabile come JSON : JSON sembra molto simile agli oggetti JavaScript e la maggior parte degli oggetti JSON sono variabili JavaScript valide.

Impostare un cookie non è davvero molto difficile, basta assegnargli un valore:

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

Quindi, puoi leggerlo con JavaScript usando document.cookie:

Ecco un parser arrotolato a mano corta, ma la risposta che ho collegato proprio sopra ha testato meglio:

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.

I cookie servono per pochi dati. Questo è ciò che fanno spesso i servizi di tracciamento.

Una volta che abbiamo più dati, possiamo codificarli con JSON all'interno di una variabile JavaScript:

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

Supponendo che $valuesia in json_encodegrado sul lato PHP (di solito lo è). Questa tecnica è ciò che Stack Overflow fa con la sua chat, ad esempio (usando solo .NET invece di PHP).

Applicazione

Se stai scrivendo un'applicazione, improvvisamente il tempo di caricamento iniziale non è sempre importante quanto le prestazioni in corso dell'applicazione e inizia a ripagare il caricamento di dati e codice separatamente.

La mia risposta qui spiega come caricare i dati utilizzando AJAX in 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?
});

Ora, il server deve solo contenere un /your/urlpercorso / file che contiene il codice che acquisisce i dati e fa qualcosa con esso, nel tuo caso:

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

In questo modo, il nostro file JavaScript richiede i dati e li mostra invece di chiedere codice o layout. Questo è più pulito e inizia a dare i suoi frutti man mano che l'applicazione diventa più alta. È anche una migliore separazione delle preoccupazioni e consente di testare il codice lato client senza alcuna tecnologia lato server coinvolta, il che è un altro vantaggio.

Postscript: devi essere molto consapevole dei vettori di attacco XSS quando inserisci qualsiasi cosa, da PHP a JavaScript. È molto difficile sfuggire ai valori correttamente ed è sensibile al contesto. Se non sei sicuro di come gestire XSS o non lo sai, leggi questo articolo OWASP , questo e questa domanda .

Answer 3

Di solito utilizzo gli attributi data- * in 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>

Questo esempio utilizza jQuery, ma può essere adattato per un'altra libreria o JavaScript vanilla.

Puoi leggere ulteriori informazioni sulla proprietà del set di dati qui: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 4

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

json_encode () richiede:

• PHP 5.2.0 o superiore
• $PHPVar codificato come UTF-8, Unicode.

Answer 5

Usa semplicemente uno dei seguenti metodi.

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

Answer 6

Mi piace molto il modo in cui WordPress funziona con le sue funzioni di accodamento e localizzazione , quindi seguendo quel modello, ho scritto una semplice classe per inserire uno script nella pagina in base alle dipendenze dello script e per rendere disponibili dati aggiuntivi per lo 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 chiamata alla enqueue_script()funzione serve per aggiungere script, impostare l'origine e le dipendenze da altri script e dati aggiuntivi necessari per lo 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 il print_scripts()metodo dell'esempio precedente invierà questo output:

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

Indipendentemente dal fatto che lo script "jquery" sia accodato dopo "jquery-ui", viene stampato prima perché è definito in "jquery-ui" che dipende da "jquery". Dati aggiuntivi per lo "script personalizzato" si trovano all'interno di un nuovo blocco di script e vengono posizionati di fronte ad esso, contiene un mydataoggetto che contiene dati aggiuntivi, ora disponibili per "script personalizzato".

Answer 7

Prova questo:

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

-

-Dopo aver provato questo per un po '

Sebbene funzioni, tuttavia rallenta le prestazioni. Poiché PHP è uno script lato server mentre JavaScript è lato utente.

Answer 8

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

Non funziona perché $valnon è definito per quanto riguarda JavaScript, cioè il codice PHP non ha prodotto nulla per $val. Prova a visualizzare la fonte nel tuo browser ed ecco cosa vedrai:

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

E

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

Questo non funziona perché PHP proverà a trattare myPlugincome una costante e quando fallisce proverà a trattarla come la stringa 'myPlugin'che proverà a concatenare con l'output della funzione PHP start()e poiché non è definita produrrà un errore fatale errore.

E

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

Anche se è molto probabile che funzioni, poiché il codice PHP produce JavaScript valido con gli argomenti previsti, se fallisce, è probabile che sia perché myPluginnon è ancora pronto. Controlla il tuo ordine di esecuzione.

Inoltre dovresti notare che l'output del codice PHP non è sicuro e dovrebbe essere filtrato con json_encode().

MODIFICARE

Perché non ho notato la parentesi mancante in myPlugin.start(<?=$val?>: - \

Come sottolinea @Second Rikudo, perché funzioni correttamente $valdovrebbe contenere la parentesi di chiusura, ad esempio:$val="42);"

Significa che il PHP ora produrrà myPlugin.start(42);e funzionerà come previsto se eseguito dal codice JavaScript.

Answer 9

Sono uscito con un metodo semplice per assegnare variabili JavaScript usando PHP.

Utilizza attributi di dati HTML5 per memorizzare le variabili PHP e quindi viene assegnato a JavaScript al caricamento della pagina.

Un tutorial completo può essere trovato qui .

Esempio:

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

Ecco il codice 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. Converti i dati in JSON
2. Chiama AJAX per ricevere il file JSON
3. Converti JSON in oggetto Javascript

Esempio:

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

Eccone uno che non vedo pubblicato come opzione. È simile all'uso di Ajax, ma chiaramente diverso.

Innanzitutto, imposta la sorgente di uno script direttamente su un file PHP.

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

Potresti anche passare una variabile al file PHP come questo esempio:

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

Quindi in "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

Ecco il trucco:

1. Ecco il tuo "PHP" per utilizzare quella variabile:

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

2. Ora hai una variabile JavaScript chiamata 'name'ed ecco il tuo codice JavaScript per utilizzare quella variabile:

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

Answer 13

Supponiamo che la tua variabile sia sempre intera. In tal caso è più semplice:

<?PHP
    $number = 4;

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

Uscita :

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

Diciamo che la tua variabile non è un numero intero, ma se provi il metodo sopra otterrai qualcosa del genere:

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

Ma in JavaScript questo è un errore di sintassi.

Quindi in PHP abbiamo una chiamata di funzione json_encodeche codifica la stringa in un oggetto JSON.

<?PHP
    $number = 'abcd';

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

Poiché abcdin JSON è "abcd", assomiglia a questo:

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

Puoi usare lo stesso metodo per gli array:

<?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 il tuo codice JavaScript ha questo aspetto:

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

Uscita console

Answer 14

Dopo molte ricerche, ho scoperto che il metodo più semplice è passare facilmente tutti i tipi di variabili.

Nello script del server, hai due variabili e stai tentando di inviarle agli script del client:

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

In uno qualsiasi dei tuoi codici JavaScript richiamati sulla pagina, chiama semplicemente quelle variabili.

Answer 15

Suppongo che i dati da trasmettere siano una stringa.

Come hanno affermato altri commentatori, AJAX è una possibile soluzione, ma i contro superano i pro: ha una latenza ed è più difficile da programmare (ha bisogno del codice per recuperare il valore sia lato server che lato client), quando è più semplice la funzione di escape dovrebbe essere sufficiente.

Quindi, siamo tornati a scappare. json_encode($string)funziona se si codifica prima la stringa sorgente come UTF-8 nel caso in cui non lo sia già, perché json_encoderichiede dati UTF-8. Se la stringa è in ISO-8859-1, puoi semplicemente usare json_encode(utf8_encode($string)); altrimenti puoi sempre usare iconvper fare prima la conversione.

Ma c'è un grosso problema. Se lo utilizzi negli eventi, devi eseguire htmlspecialchars()il risultato per renderlo codice corretto. E poi devi stare attento a usare le virgolette doppie per racchiudere l'evento, o aggiungerlo sempre ENT_QUOTESa htmlspecialchars. Per esempio:

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

Tuttavia, non è possibile utilizzarlo htmlspecialcharssu un normale codice JavaScript (codice racchiuso tra tag <script>... </script>). Ciò rende l'uso di questa funzione soggetto a errori, dimenticando htmlspecialcharsil risultato durante la scrittura del codice evento.

È possibile scrivere una funzione che non presenta questo problema, e può essere utilizzata sia negli eventi che nel normale codice JavaScript, purché racchiuda i propri eventi sempre tra virgolette singole, o sempre tra virgolette doppie. Ecco la mia proposta, richiedendo che siano tra virgolette doppie (che preferisco):

<?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 funzione richiede PHP 5.4+. Utilizzo di esempio:

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

Secondo il tuo codice

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

Ora puoi ottenere valore usando DOM, usa innerHTML di span id, in questo caso non devi fare alcuna chiamata al server, o Ajax o altro.

La tua pagina lo stamperà utilizzando PHP e JavaScript otterrà valore utilizzando DOM.

Answer 17

<?php

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

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

?>