Wie übergebe ich Variablen und Daten von PHP an JavaScript?

Question

Ich habe eine Variable in PHP und ich brauche ihren Wert in meinem JavaScript-Code. Wie kann ich meine Variable von PHP nach JavaScript bringen?

Ich habe Code, der so aussieht:

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

Ich habe JavaScript-Code, der Folgendes benötigt valund aussieht:

<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

Es gibt tatsächlich mehrere Ansätze, um dies zu tun. Einige erfordern mehr Overhead als andere, und einige gelten als besser als andere.

In keiner bestimmten Reihenfolge:

1. Verwenden Sie AJAX, um die benötigten Daten vom Server abzurufen.
2. Echo die Daten irgendwo auf der Seite und verwenden Sie JavaScript, um die Informationen aus dem DOM zu erhalten.
3. Echo die Daten direkt in JavaScript.

In diesem Beitrag werden wir jede der oben genannten Methoden untersuchen und die Vor- und Nachteile der einzelnen Methoden sowie deren Implementierung untersuchen.

1. Verwenden Sie AJAX, um die benötigten Daten vom Server abzurufen

Diese Methode wird als die beste angesehen, da Ihre serverseitigen und clientseitigen Skripts vollständig getrennt sind .

Vorteile

• Bessere Trennung zwischen Ebenen - Wenn Sie morgen die Verwendung von PHP beenden und zu einem Servlet, einer REST-API oder einem anderen Dienst wechseln möchten, müssen Sie nicht viel am JavaScript-Code ändern.
• Besser lesbar - JavaScript ist JavaScript, PHP ist PHP. Ohne die beiden zu mischen, erhalten Sie in beiden Sprachen besser lesbaren Code.
• Ermöglicht asynchrone Datenübertragung - Das Abrufen der Informationen von PHP kann zeit- und ressourcenintensiv sein. Manchmal möchten Sie einfach nicht auf die Informationen warten, die Seite laden und die Informationen jederzeit erreichen.
• Daten werden nicht direkt im Markup gefunden - Dies bedeutet, dass Ihr Markup frei von zusätzlichen Daten ist und nur JavaScript sie sieht.

Nachteile

• Latenz - AJAX erstellt eine HTTP-Anforderung, und HTTP-Anforderungen werden über das Netzwerk übertragen und weisen Netzwerklatenzen auf.
• Status - Daten, die über eine separate HTTP-Anforderung abgerufen werden, enthalten keine Informationen aus der HTTP-Anforderung, die das HTML-Dokument abgerufen hat. Möglicherweise benötigen Sie diese Informationen (z. B. wenn das HTML-Dokument als Antwort auf eine Formularübermittlung generiert wird) und müssen sie in diesem Fall irgendwie übertragen. Wenn Sie das Einbetten der Daten in die Seite ausgeschlossen haben (die Sie haben, wenn Sie diese Technik verwenden), beschränkt sich dies auf Cookies / Sitzungen, die möglicherweise Rennbedingungen unterliegen.

Implementierungsbeispiel

Mit AJAX benötigen Sie zwei Seiten, eine, auf der PHP die Ausgabe generiert, und die zweite, auf der JavaScript diese Ausgabe erhält:

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 (oder wie auch immer die eigentliche Seite heißt)

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

Die obige Kombination der beiden Dateien alarmiert, 42wenn das Laden der Datei abgeschlossen ist.

Noch etwas Lesematerial

• Verwenden von XMLHttpRequest - MDN
• XMLHttpRequest-Objektreferenz - MDN
• Wie gebe ich die Antwort von einem asynchronen Aufruf zurück?

2. Echo die Daten irgendwo auf der Seite und verwenden Sie JavaScript, um die Informationen aus dem DOM zu erhalten

Diese Methode ist AJAX weniger vorzuziehen, hat aber dennoch ihre Vorteile. Es ist immer noch relativ getrennt zwischen PHP und JavaScript in dem Sinne, dass es kein PHP direkt im JavaScript gibt.

Vorteile

• Schnell - DOM-Vorgänge sind oft schnell und Sie können relativ schnell viele Daten speichern und darauf zugreifen.

Nachteile

• Potenziell unsemantisches Markup - Normalerweise verwenden Sie eine Art <input type=hidden>zum Speichern der Informationen, da es einfacher ist, die Informationen herauszuholen. DiesinputNode.value bedeutet jedoch, dass Sie ein bedeutungsloses Element in Ihrem HTML-Code haben. HTML enthält das <meta>Element für Daten zum Dokument, und HTML 5 führt data-*Attribute für Daten speziell zum Lesen mit JavaScript ein, die bestimmten Elementen zugeordnet werden können.
• Verschmutzt die Quelle - Daten, die PHP generiert, werden direkt in die HTML-Quelle ausgegeben, was bedeutet, dass Sie eine größere und weniger fokussierte HTML-Quelle erhalten.
• Schwieriger, strukturierte Daten zu erhalten - Strukturierte Daten müssen gültiges HTML sein, andernfalls müssen Sie Strings selbst maskieren und konvertieren.
• Koppelt PHP eng mit Ihrer Datenlogik - Da PHP in der Präsentation verwendet wird, können Sie die beiden nicht sauber voneinander trennen.

Implementierungsbeispiel

Damit soll eine Art Element erstellt werden, das dem Benutzer nicht angezeigt wird, aber für JavaScript sichtbar ist.

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 die Daten direkt in JavaScript

Dies ist wahrscheinlich am einfachsten zu verstehen.

Vorteile

• Sehr einfach zu implementieren - Es ist sehr wenig erforderlich, dies zu implementieren und zu verstehen.
• Verschmutzt die Quelle nicht - Variablen werden direkt in JavaScript ausgegeben, sodass das DOM nicht betroffen ist.

Nachteile

• Koppelt PHP eng mit Ihrer Datenlogik - Da PHP in der Präsentation verwendet wird, können Sie die beiden nicht sauber voneinander trennen.

Implementierungsbeispiel

Die Implementierung ist relativ einfach:

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

Viel Glück!

Answer 2

Ich werde eine einfachere Antwort versuchen:

Erklärung des Problems

Lassen Sie uns zunächst den Ablauf von Ereignissen verstehen, wenn eine Seite von unserem Server bereitgestellt wird:

• Zuerst wird PHP ausgeführt, es generiert den HTML-Code, der dem Client bereitgestellt wird.
• Dann wird der HTML-Code an den Client geliefert. Nachdem PHP damit fertig ist, möchte ich betonen, dass PHP damit fertig ist und nicht mehr darauf zugreifen kann, sobald der Code den Server verlässt.
• Dann erreicht der HTML-Code mit JavaScript den Client, der JavaScript für diesen HTML-Code ausführen kann.

Das Wichtigste dabei ist, dass HTTP zustandslos ist . Sobald eine Anfrage den Server verlassen hat, kann der Server sie nicht mehr berühren. Damit haben wir folgende Möglichkeiten:

1. Senden Sie weitere Anfragen vom Client, nachdem die erste Anfrage abgeschlossen wurde.
2. Codieren Sie, was der Server in der ersten Anfrage zu sagen hatte.

Lösungen

Das ist die Kernfrage, die Sie sich stellen sollten:

Schreibe ich eine Website oder eine Bewerbung?

Websites sind hauptsächlich seitenbasiert und die Ladezeiten der Seiten müssen so schnell wie möglich sein (z. B. Wikipedia). Webanwendungen sind AJAX-schwerer und führen viele Roundtrips durch, um dem Kunden schnelle Informationen zu liefern (z. B. ein Aktien-Dashboard).

Webseite

Das Senden weiterer Anforderungen vom Client nach Abschluss der ersten Anforderung ist langsam, da mehr HTTP-Anforderungen mit erheblichem Overhead erforderlich sind. Darüber hinaus ist Asynchronität erforderlich, da für eine AJAX-Anforderung ein Handler erforderlich ist, wenn sie abgeschlossen ist.

Ich würde nicht empfehlen, eine weitere Anfrage zu stellen, es sei denn, Ihre Site ist eine Anwendung zum Abrufen dieser Informationen vom Server.

Sie möchten schnelle Antwortzeiten, die einen großen Einfluss auf die Konvertierungs- und Ladezeiten haben. Das Erstellen von Ajax-Anforderungen ist in diesem Fall für die anfängliche Verfügbarkeit langsam und nicht erforderlich.

Sie haben zwei Möglichkeiten, um das Problem anzugehen

• Setzen Sie ein Cookie - Cookies sind Header, die in HTTP-Anforderungen gesendet werden und die sowohl der Server als auch der Client lesen können.
• Codieren Sie die Variable als JSON - JSON kommt JavaScript-Objekten sehr nahe und die meisten JSON-Objekte sind gültige JavaScript-Variablen.

Das Setzen eines Cookies ist wirklich nicht sehr schwierig. Sie weisen ihm lediglich einen Wert zu:

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

Dann können Sie es mit JavaScript lesen, indem Sie document.cookie:

Hier ist ein kurzer handgerollter Parser, aber die Antwort, die ich direkt darüber verlinkt habe, hat besser getestete:

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.

Cookies sind gut für ein paar Daten. Dies ist, was Tracking-Dienste oft tun.

Sobald wir mehr Daten haben, können wir sie stattdessen mit JSON in einer JavaScript-Variablen codieren:

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

Angenommen, es $valueist json_encodeauf der PHP-Seite möglich (normalerweise). Diese Technik macht Stack Overflow beispielsweise mit seinem Chat (nur mit .NET anstelle von PHP).

Anwendung

Wenn Sie eine Anwendung schreiben, ist die anfängliche Ladezeit plötzlich nicht mehr so ​​wichtig wie die laufende Leistung der Anwendung, und es lohnt sich, Daten und Code separat zu laden.

Meine Antwort hier erklärt, wie Daten mit AJAX in JavaScript geladen werden:

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

Oder mit jQuery:

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

Jetzt muss der Server nur noch eine /your/urlRoute / Datei enthalten, die Code enthält, der die Daten erfasst und etwas damit macht, in Ihrem Fall:

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

Auf diese Weise fragt unsere JavaScript-Datei nach den Daten und zeigt sie an, anstatt nach Code oder Layout zu fragen. Dies ist sauberer und zahlt sich aus, wenn die Anwendung höher wird. Es ist auch eine bessere Trennung von Bedenken und ermöglicht das Testen des clientseitigen Codes ohne serverseitige Technologie, was ein weiteres Plus ist.

Nachtrag: Sie müssen sich der XSS-Angriffsvektoren sehr bewusst sein, wenn Sie etwas von PHP in JavaScript einfügen. Es ist sehr schwer, Werten richtig zu entkommen, und es ist kontextsensitiv. Wenn Sie sich nicht sicher sind, wie Sie mit XSS umgehen sollen, oder sich dessen nicht bewusst sind, lesen Sie bitte diesen OWASP-Artikel , diesen und diese Frage .

Answer 3

Normalerweise verwende ich Daten- * Attribute 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>

In diesem Beispiel wird jQuery verwendet, es kann jedoch für eine andere Bibliothek oder Vanille-JavaScript angepasst werden.

Weitere Informationen zur Dataset-Eigenschaft finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 4

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

json_encode () erfordert:

• PHP 5.2.0 oder mehr
• $PHPVar codiert als UTF-8, Unicode.

Answer 5

Verwenden Sie einfach eine der folgenden Methoden.

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

ODER

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

Answer 6

Ich mag die Art und Weise, wie WordPress mit seinen Enqueue- und Lokalisierungsfunktionen arbeitet. Daher habe ich nach diesem Modell eine einfache Klasse geschrieben, um ein Skript gemäß den Skriptabhängigkeiten in eine Seite einzufügen und zusätzliche Daten für das Skript verfügbar zu machen.

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

Der Aufruf der enqueue_script()Funktion dient zum Hinzufügen eines Skripts, zum Festlegen der Quelle und der Abhängigkeiten von anderen Skripten sowie zum Hinzufügen zusätzlicher Daten für das Skript.

$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();

Die print_scripts()Methode des obigen Beispiels sendet diese Ausgabe:

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

Unabhängig von der Tatsache, dass das Skript 'jquery' nach dem 'jquery-ui' in die Warteschlange gestellt wird, wird es zuvor gedruckt, da es in 'jquery-ui' definiert ist, dass es von 'jquery' abhängt. Zusätzliche Daten für das 'benutzerdefinierte Skript' befinden sich in einem neuen Skriptblock und werden davor platziert. Es enthält ein mydataObjekt, das zusätzliche Daten enthält, die jetzt für 'benutzerdefiniertes Skript' verfügbar sind.

Answer 7

Versuche dies:

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

- -

-Nachdem ich es eine Weile versucht habe

Es funktioniert zwar, verlangsamt jedoch die Leistung. Da PHP ein serverseitiges Skript ist, ist JavaScript eine Benutzerseite.

Answer 8

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

Es funktioniert nicht, weil $vales in Bezug auf JavaScript undefiniert ist, dh der PHP-Code hat nichts für ausgegeben $val. Versuchen Sie, die Quelle in Ihrem Browser anzuzeigen. Folgendes wird angezeigt:

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

Und

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

Dies funktioniert nicht, da PHP versucht, myPluginals Konstante zu behandeln, und wenn dies fehlschlägt, versucht es, es als die Zeichenfolge zu behandeln, 'myPlugin'die es mit der Ausgabe der PHP-Funktion zu verketten versucht, start()und da dies undefiniert ist, wird es einen fatalen Effekt erzeugen Error.

Und

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

Dies funktioniert zwar am wahrscheinlichsten, da der PHP-Code gültiges JavaScript mit den erwarteten Argumenten erzeugt. Wenn dies jedoch fehlschlägt, ist es wahrscheinlich, dass es noch myPluginnicht fertig ist. Überprüfen Sie Ihre Ausführungsreihenfolge.

Beachten Sie auch, dass die Ausgabe des PHP-Codes unsicher ist und mit gefiltert werden sollte json_encode().

BEARBEITEN

Weil ich die fehlende Klammer in myPlugin.start(<?=$val?>: - \ nicht bemerkt habe

Wie @Second Rikudo betont, $valmuss die schließende Klammer enthalten sein , damit es richtig funktioniert , zum Beispiel:$val="42);"

Dies bedeutet, dass das PHP jetzt produziert myPlugin.start(42);und wie erwartet funktioniert, wenn es vom JavaScript-Code ausgeführt wird.

Answer 9

Ich habe eine einfache Methode gefunden, um JavaScript-Variablen mit PHP zuzuweisen.

Es verwendet HTML5-Datenattribute zum Speichern von PHP-Variablen und wird dann beim Laden der Seite JavaScript zugewiesen.

Ein vollständiges Tutorial finden Sie hier .

Beispiel:

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

Hier ist der JavaScript-Code

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. Konvertieren Sie die Daten in JSON
2. Rufen Sie AJAX auf, um die JSON- Datei zu erhalten
3. Konvertieren Sie JSON in ein Javascript- Objekt

Beispiel:

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

SCHRITT 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

Hier ist eine, die ich nicht als Option sehe. Es ähnelt der Verwendung von Ajax, unterscheidet sich jedoch deutlich.

Stellen Sie zunächst die Quelle eines Skripts direkt auf eine PHP-Datei ein.

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

Sie können sogar eine Variable an die PHP-Datei zurückgeben, wie in diesem Beispiel:

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

Dann 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

Hier ist der Trick:

1. Hier ist Ihr 'PHP' , um diese Variable zu verwenden:

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

2. Jetzt haben Sie eine JavaScript-Variable namens 'name', und hier ist Ihr JavaScript-Code, um diese Variable zu verwenden:

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

Answer 13

Angenommen, Ihre Variable ist immer eine Ganzzahl. In diesem Fall ist dies einfacher:

<?PHP
    $number = 4;

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

Ausgabe :

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

Angenommen, Ihre Variable ist keine Ganzzahl, aber wenn Sie die obige Methode ausprobieren, erhalten Sie ungefähr Folgendes:

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

In JavaScript ist dies jedoch ein Syntaxfehler.

In PHP gibt es also einen Funktionsaufruf json_encode, der eine Zeichenfolge für ein JSON-Objekt codiert.

<?PHP
    $number = 'abcd';

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

Da abcdin JSON ist "abcd", sieht es so aus:

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

Sie können dieselbe Methode für Arrays verwenden:

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

Und Ihr JavaScript-Code sieht folgendermaßen aus:

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

Konsolenausgabe

Answer 14

Nach langem Suchen stellte ich fest, dass die einfachste Methode darin besteht, alle Arten von Variablen einfach zu übergeben.

Im Serverskript haben Sie zwei Variablen, und Sie versuchen, sie an die Client-Skripte zu senden:

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

Rufen Sie in einem Ihrer auf der Seite aufgerufenen JavaScript-Code einfach diese Variablen auf.

Answer 15

Ich gehe davon aus, dass die zu übertragenden Daten eine Zeichenfolge sind.

Wie andere Kommentatoren angegeben haben, ist AJAX eine mögliche Lösung, aber die Nachteile überwiegen die Vorteile: Es hat eine Latenz und es ist schwieriger zu programmieren (es benötigt den Code, um den Wert sowohl auf Server- als auch auf Clientseite abzurufen), wenn dies einfacher ist Fluchtfunktion sollte ausreichen.

Also sind wir zurück auf der Flucht. json_encode($string)funktioniert, wenn Sie die Quellzeichenfolge zuerst als UTF-8 codieren, falls dies noch nicht geschehen ist, da json_encodeUTF-8-Daten erforderlich sind. Wenn sich die Zeichenfolge in ISO-8859-1 befindet, können Sie sie einfach verwenden json_encode(utf8_encode($string)). Andernfalls können Sie immer iconvzuerst die Konvertierung durchführen.

Aber es gibt eine große Sache. Wenn Sie es in Ereignissen verwenden, müssen Sie htmlspecialchars()das Ergebnis ausführen, damit es den richtigen Code enthält. Und dann müssen Sie entweder darauf achten, doppelte Anführungszeichen zu verwenden, um das Ereignis einzuschließen, oder immer ENT_QUOTESzu htmlspecialchars hinzufügen . Zum Beispiel:

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

Sie können jedoch keinen htmlspecialcharsnormalen JavaScript-Code verwenden (Code in <script>... </script>Tags eingeschlossen). htmlspecialcharsDadurch wird diese Funktion fehleranfällig, da beim Schreiben des Ereigniscodes das Ergebnis vergessen wird .

Es ist möglich, eine Funktion zu schreiben, die dieses Problem nicht aufweist und sowohl in Ereignissen als auch in regulärem JavaScript-Code verwendet werden kann, sofern Sie Ihre Ereignisse immer in einfache Anführungszeichen oder immer in doppelte Anführungszeichen setzen. Hier ist mein Vorschlag, wonach sie in doppelten Anführungszeichen stehen müssen (was ich bevorzuge):

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

Die Funktion erfordert PHP 5.4+. Anwendungsbeispiel:

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

Gemäß Ihrem Code

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

Jetzt können Sie mit DOM einen Wert abrufen, innerHTML mit der Span-ID verwenden. In diesem Fall müssen Sie keinen Aufruf an den Server oder Ajax oder eine andere Sache ausführen.

Ihre Seite druckt sie mit PHP und Ihr JavaScript erhält Wert mit DOM.

Answer 17

<?php

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

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

?>