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

Hier ist der Trick:

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

   ';
       echo 'var name = ' . json_encode($name) . ';';
       echo '';
   ?>

2. Jetzt hast du eine JavaScript-Variable namens 'name', und hier ist dein JavaScript-Code, um diese Variable zu verwenden:

        console.log("Ich bin überall " + name);

Answer 2

Sagen wir, Ihre Variable ist immer eine ganze Zahl. In diesem Fall ist dies einfacher:

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

Ausgabe:

var number = 4;alert(number);

Sagen wir, Ihre Variable ist keine ganze Zahl, aber wenn Sie die obige Methode versuchen, erhalten Sie etwas Ähnliches wie dies:

var number = abcd;alert(number);

Dies ist jedoch in JavaScript ein Syntaxfehler.

Also in PHP haben wir eine Funktion namens json_encode, die einen String in ein JSON-Objekt encodiert.

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

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

var number = "abcd";alert(number);

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

 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '';
?>

Und Ihr JavaScript-Code sieht so aus:

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

Konsolenausgabe

Answer 3

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

Wie andere Kommentatoren bereits erwähnt haben, ist AJAX eine mögliche Lösung, aber die Nachteile überwiegen die Vorteile: Es hat eine Latenz und ist schwieriger zu programmieren (es benötigt den Code, um den Wert sowohl server- als auch clientseitig abzurufen), wenn eine einfachere Escaping-Funktion ausreichen sollte.

Also sind wir zurück beim Escaping. json_encode($string) funktioniert wenn du die Ausgangszeichenkette zuerst als UTF-8 kodierst, falls sie es nicht bereits ist, denn json_encode erfordert UTF-8-Daten. Wenn die Zeichenkette in ISO-8859-1 ist, kannst du einfach json_encode(utf8_encode($string)) verwenden; andernfalls kannst du immer zuerst iconv zur Konvertierung verwenden.

Aber es gibt einen großen Stolperstein. Wenn du es in Ereignissen verwendest, musst du htmlspecialchars() auf das Ergebnis anwenden, um es zu korrektem Code zu machen. Du musst dann entweder darauf achten, doppelte Anführungszeichen zu verwenden, um das Ereignis einzuschließen, oder immer ENT_QUOTES zu htmlspecialchars hinzufügen. Zum Beispiel:

Script-Tags & Ampersand!";
    // Funktioniert nicht:
    //echo '';
    // Funktioniert nicht:
    //echo "";
    // Funktioniert nicht:
    //echo "";

    // Funktioniert:
    //echo "";
    // Funktioniert:
    echo '';

    echo "";

Jedoch kannst du htmlspecialchars nicht auf regulären JavaScript-Code (Code, der in </code>...<code>-Tags eingeschlossen ist) anwenden. Das macht die Verwendung dieser Funktion fehleranfällig, da man vergessen könnte, das Ergebnis zu htmlspecialchars, wenn man Event-Code schreibt.

Es ist möglich, eine Funktion zu schreiben, die dieses Problem nicht hat und sowohl in Ereignissen als auch in regulärem JavaScript-Code verwendet werden kann, solange du deine Ereignisse immer in einfachen Anführungszeichen oder immer in doppelten Anführungszeichen einschließt. Hier ist mein Vorschlag, bei dem sie in doppelten Anführungszeichen stehen müssen (was ich bevorzuge):

`Die Funktion erfordert PHP 5.4+. Beispielverwendung:

Script-Tags & Ampersand!";
    // Beachte die Verwendung von doppelten Anführungszeichen, um die Ereignisdefinition einzuschließen!
    echo '';
    // Beispiel mit regulärem Code:
    echo 'alert(', escapeJSString($myvar), ');';
    echo '';`

Answer 4

Dies ist das, was für mich im Jahr 2022 funktioniert, ich habe diese Lösung verwendet, um die E-Mail des aktuellen Benutzers zu erhalten

Ich erstelle einen Shortcode mit PHP und füge ihn zu PHP .function hinzu:

function my_get_current_user_email(){
    $current_user = wp_get_current_user();
    $email = $current_user->user_email;
    return $email;  
} 
add_shortcode( 'get_email', 'my_get_current_user_email');

Verwenden Sie dann ein div-Element, um den Shortcode zu umschließen:

[get_email]

Schließlich greifen Sie mit JavaScript auf den Inhalt des Div-Elements zu:

const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)

Dies funktioniert perfekt für das, was ich wollte, und ich hoffe, es funktioniert auch für Sie.

Answer 5

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");

    var color = <?php echo json_encode($fruits) ?>;

JS (yourexternal.js)

alert("Die Apfelfarbe ist" + color['apple'] + ", die Erdbeerfarbe ist " + color['strawberry'] + " und die Kiwifarbe ist " + color['kiwi'] + ".");

OUTPUT

Die Apfelfarbe ist gelb, die Erdbeerfarbe ist rot und die Kiwifarbe ist grün.