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

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 geliefert wird:

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

Das Wichtigste, an das Sie sich erinnern sollten, ist, dass HTTP statuslos ist . Sobald eine Anfrage den Server verlassen hat, kann der Server sie nicht mehr berühren. Wir haben also folgende Möglichkeiten:

1. Senden Sie weitere Anforderungen vom Client , nachdem die erste Anforderung ausgeführt wurde.
2. Kodieren 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 basieren hauptsächlich auf Seiten, und die Ladezeiten für Seiten müssen so schnell wie möglich sein (z. B. Wikipedia). Webanwendungen sind AJAX schwerer und führen viele Roundtrips durch, um den Kunden schnell über Informationen zu informieren (z. B. über ein Bestands-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 erfordert es Asynchronität , da für die Erstellung einer AJAX -Anforderung ein Handler erforderlich ist, wenn diese abgeschlossen ist.

Ich würde nicht empfehlen, eine weitere Anfrage zu stellen, es sei denn, Ihre Site ist eine Anwendung , um diese Informationen vom Server abzurufen.

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

Sie haben zwei Möglichkeiten, um das Problem anzugehen

• Cookie setzen - Cookies sind Header, die in HTTP-Anfragen gesendet werden und von Server und Client gelesen werden können.
• Codieren Sie die Variable als JSON - JSON ähnelt JavaScript-Objekten sehr und die meisten JSON-Objekte sind gültiges JavaScript Variablen.

Setzen eines Cookies ist wirklich nicht sehr schwierig, Sie weisen ihm einfach 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 mit JavaScript lesen mit document.cookie:

Hier ist ein kurzer, von Hand gerollter Parser, aber die Antwort, die ich direkt darüber verlinkt habe, ist besser getestet:

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 wenig Daten. Dies tun Tracking-Dienste häufig.

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

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

Angenommen, $value ist json_encodeable auf der Seite PHP (dies ist normalerweise der Fall). Diese Technik macht Stack Overflow zum Beispiel 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 getrennt zu laden.

Meine Antwort hier erklärt, wie man Daten mit AJAX in JavaScript lädt:

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/url Route/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 beginnt sich auszuzahlen, wenn die Anwendung höher wird. Es ist auch eine bessere Trennung von Bedenken und ermöglicht das Testen des clientseitigen Codes, ohne dass eine serverseitige Technologie erforderlich ist, was ein weiteres Plus darstellt.

Postscript: Sie müssen sehr über XSS-Angriffsvektoren Bescheid wissen, wenn Sie etwas aus PHP zu JavaScript. Es ist sehr schwierig, Werte richtig zu umgehen, 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 .

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

            // Service variable now contains the value of $myService->getValue();
        });
    });
</script>

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

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

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

json_encode () benötigt:

• PHP 5.2.0 oder höher
• $PHPVar codiert als UTF-8, Unicode.

Wenden Sie einfach eine der folgenden Methoden an.

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

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.

Mir gefällt die Arbeitsweise von WordPress mit den Funktionen enqueue und localize sehr gut. Nach diesem Vorbild habe ich eine einfache Klasse zum Einfügen von Skripten geschrieben Seite entsprechend den Skriptabhängigkeiten und um 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 Funktion enqueue_script() dient zum Hinzufügen eines Skripts, zum Festlegen der Quelle und der Abhängigkeiten von anderen Skripts sowie von zusätzlichen Daten, die für das Skript benötigt werden.

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

Und die Methode print_scripts() 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>

Ungeachtet der Tatsache, dass das Skript 'jquery' nach 'jquery-ui' in die Warteschlange gestellt wird, wird es zuvor gedruckt, da 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. Er enthält das Objekt mydata, das zusätzliche Daten enthält und jetzt für 'benutzerdefiniertes Skript' verfügbar ist.

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

Dies funktioniert nicht, da $val für JavaScript nicht definiert ist, d. H. Der PHP Code hat für $val nichts ausgegeben. Versuchen Sie, die Quelle in Ihrem Browser anzuzeigen, und sehen Sie Folgendes:

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, myPlugin als Konstante zu behandeln. Wenn dies fehlschlägt, wird versucht, 'myPlugin' als Zeichenfolge zu behandeln, mit der es zu verketten versucht Die Ausgabe der PHP -Funktion start() und da diese undefiniert ist, wird ein schwerwiegender Fehler erzeugt.

Und

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

Dies funktioniert wahrscheinlich, da der Code PHP gültiges JavaScript mit den erwarteten Argumenten erzeugt. Wenn dies fehlschlägt, liegt es wahrscheinlich daran, dass myPlugin noch nicht bereit ist. Überprüfen Sie Ihre Ausführungsreihenfolge.

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

EDIT

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

Wie @Second Rikudo ausführt, muss $val die schließende Klammer enthalten, damit es korrekt funktioniert. Beispiel: $val="42);"

Das bedeutet, dass das PHP nun myPlugin.start(42); erzeugt und erwartungsgemäß funktioniert, wenn es vom JavaScript-Code ausgeführt wird.

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

1. Konvertiere die Daten in JSON
2. Rufen Sie AJAX auf, um JSON zu erhalten
3. Konvertieren Sie JSON in 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);
      }
   }
}

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

Legen Sie zunächst die Quelle eines Skripts direkt auf eine PHP -Datei fest.

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

Sie könnten sogar eine Variable an die PHP -Datei zurückgeben, wie im folgenden 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;
?>

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 mit dem Namen 'name', und hier ist Ihr JavaScript-Code, um diese Variable zu verwenden:

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

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

Im Serverskript gibt es zwei Variablen, und Sie versuchen, sie an die Clientskripte 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 beliebigen auf der Seite aufgerufenen JavaScript-Code einfach diese Variablen auf.

Angenommen, Ihre Variable ist immer eine Ganzzahl. In diesem Fall ist das 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.

Also haben wir in PHP einen Funktionsaufruf json_encode, der einen String in ein JSON-Objekt codiert.

<?PHP
    $number = 'abcd';

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

Da abcd in JSON "abcd" ist, 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 so aus:

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

Konsolenausgabe

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 dem Server als auch auf dem Client abzurufen). Seite), wenn eine einfachere Fluchtfunktion ausreichen sollte.

Also sind wir zurück auf der Flucht. json_encode($string) funktioniert if Sie codieren die Quellzeichenfolge zuerst als UTF-8, falls dies noch nicht geschehen ist, da json_encode UTF-8-Daten erfordert. Wenn die Zeichenfolge ISO-8859-1 entspricht, können Sie einfach json_encode(utf8_encode($string)) verwenden. Andernfalls können Sie immer iconv verwenden, um zuerst die Konvertierung durchzuführen.

Aber es gibt ein großes Problem. Wenn Sie es in Ereignissen verwenden, müssen Sie htmlspecialchars() für das Ergebnis ausführen, um den korrekten Code zu erstellen. Und dann müssen Sie entweder darauf achten, das Ereignis in doppelte Anführungszeichen zu setzen, oder immer ENT_QUOTES zu 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 htmlspecialchars jedoch nicht für normalen JavaScript-Code verwenden (Code, der in <script>...</script> -Tags eingeschlossen ist). Dies macht Gebrauch von dieser Funktion, die fehleranfällig ist, indem sie das Ergebnis beim Schreiben von Ereigniscode auf htmlspecialchars vergisst.

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 benötigt 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>';

Nach Ihrem Code

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

Jetzt können Sie mithilfe von DOM einen Wert abrufen, indem Sie innerHTML mit der ID span verwenden. In diesem Fall müssen Sie keinen Aufruf an den Server oder an Ajax oder eine andere Sache tätigen.

Ihre Seite druckt es mit PHP und Sie erhalten mit DOM einen Wert für JavaScript.

<?php

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

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

?>