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

Question

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

Ich habe folgenden Code:

getValue(); // Führt einen API- und Datenbankaufruf durch

Auf derselben Seite habe ich JavaScript-Code, der den Wert der $val-Variable als Parameter benötigt:

    myPlugin.start($val); // Ich habe das versucht, aber es hat nicht funktioniert
    <?php myPlugin.start($val); ?> // Das hat auch nicht funktioniert
    myPlugin.start(<?=$val?>); // Das funktioniert manchmal, aber manchmal scheitert es

Answer 1

Versuchen Sie dies:

 var x = " . json_encode($phpVariable) . "";
?>

--

-Nachdem Sie dies eine Weile versucht haben

Auch wenn es funktioniert, verlangsamt es jedoch die Leistung. Da PHP ein serverseitiges Skript ist, während JavaScript benutzerseitig ist.

Answer 2

Ich mag die Art und Weise, wie WordPress mit seinen enqueue und localize Funktionen funktioniert, also habe ich basierend auf diesem Modell eine einfache Klasse geschrieben, um Skripte entsprechend ihrer Abhängigkeiten in die Seite einzufügen und zusätzliche Daten für das Skript verfügbar zu machen.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Eindeutiger Skript-Identifier
     * @param string $src      Skript src Attribut
     * @param array  $deps       Ein Array von Abhängigkeiten (Skript-Identifikatoren).
     * @param array  $data       Ein Array, Daten, die json_encoded werden und für das Skript verfügbar sind.
     */
    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(" var %s = %s; " . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "" . PHP_EOL;
        }
    }
}

Der Aufruf der Funktion enqueue_script() dient dazu, ein Skript hinzuzufügen, die Quelle festzulegen und Abhängigkeiten zu anderen Skripts sowie zusätzliche benötigte Daten für das Skript anzugeben.

$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 wird diese Ausgabe senden:

 var mydata = {"value":20}; 

Unabhängig davon, dass das Skript 'jquery' nach dem 'jquery-ui' eingefügt wird, wird es zuerst ausgegeben, weil in 'jquery-ui' festgelegt ist, dass es von 'jquery' abhängt. Zusätzliche Daten für das 'custom-script' befinden sich in einem neuen Skriptblock und werden vor diesem platziert. Es enthält das mydata Objekt, das zusätzliche Daten enthält und nun für 'custom-script' verfügbar ist.

Answer 3

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

Es verwendet HTML5-Datenattribute, um PHP-Variablen zu speichern, die dann beim Laden der Seite JavaScript zugewiesen werden.

Beispiel:

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

1. Konvertiere die Daten in JSON
2. Rufe AJAX auf, um die JSON-Datei zu empfangen
3. Konvertiere JSON in ein Javascript-Objekt

Beispiel:

SCHRITT 1

connect_error) {
      die("Verbindung fehlgeschlagen: " . $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) {
         // SCHRITT 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

Answer 5

myPlugin.start($val); // Habe das versucht, hat nicht funktioniert

Es funktioniert nicht, weil $val aus JavaScript-Sicht nicht definiert ist, d.h. der PHP-Code hat nichts für $val ausgegeben. Versuchen Sie, den Quellcode in Ihrem Browser anzuzeigen, und hier ist, was Sie sehen werden:

myPlugin.start(); // Das habe ich versucht, und es hat nicht funktioniert

Und

 // Das hat auch nicht funktioniert

Dies funktioniert nicht, weil PHP versuchen wird, myPlugin als Konstante zu behandeln und wenn das fehlschlägt, wird es versuchen, es als den String 'myPlugin' zu behandeln, den es mit der Ausgabe der PHP-Funktion start() konkatenieren wird und da diese undefiniert ist, wird es einen schwerwiegenden Fehler erzeugen.

Und

 myPlugin.start( // Das funktioniert manchmal, aber manchmal scheitert es

Obwohl dies wahrscheinlich funktioniert, da der PHP-Code gültiges JavaScript mit den erwarteten Argumenten erzeugt, wenn es fehlschlägt, liegt dies wahrscheinlich daran, dass myPlugin noch nicht bereit ist. Überprüfen Sie die Reihenfolge der Ausführung.

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

BEARBEITEN

Weil ich das fehlende schließende Klammern in myPlugin.start( nicht bemerkt habe :-\

Wie @Second Rikudo darauf hinweist, damit es richtig funktioniert, müsste $val die schließende Klammer enthalten, zum Beispiel: $val="42);"

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