it-swarm.com.de

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

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

Ich habe Code, der so aussieht:

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

Ich habe JavaScript-Code, der val benötigt, und sehe folgendermaßen aus:

<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>
630
Madara Uchiha

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. Übertragen Sie die Daten auf die Seite und verwenden Sie JavaScript, um die Informationen aus dem DOM abzurufen.
  3. Echo die Daten direkt an JavaScript.

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

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 den Ebenen - Wenn Sie morgen die Verwendung von PHP beenden und zu einem Servlet, einer REST -API oder einer anderen wechseln möchten Bei anderen Diensten müssen Sie nicht viel am JavaScript-Code ändern.
  • Besser lesbar - JavaScript ist JavaScript, PHP ist PHP. Ohne die beiden zu vermischen, 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 immer zur Hand haben.
  • Daten werden nicht direkt im Markup gefunden - Dies bedeutet, dass Ihr Markup frei von zusätzlichen Daten ist und nur von JavaScript angezeigt wird.

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 ausgeschlossen haben, dass die Daten in die Seite eingebettet werden (was bei Verwendung dieser Technik der Fall ist), sind Sie auf Cookies/Sitzungen beschränkt, die möglicherweise Rennbedingungen unterliegen.

Implementierungsbeispiel

Mit AJAX benötigen Sie zwei Seiten, von denen PHP die Ausgabe generiert und von der zweiten Seite aus JavaScript diese Ausgabe abruft:

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

Durch die obige Kombination der beiden Dateien wird 42 benachrichtigt, wenn der Ladevorgang der Datei abgeschlossen ist.

Noch mehr Lesestoff

2. Geben Sie die Daten irgendwo in die Seite ein und verwenden Sie JavaScript, um die Informationen aus dem DOM abzurufen

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

Vorteile

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

Nachteile

  • Potenziell unsemantisches Markup - Normalerweise verwenden Sie zum Speichern der Informationen eine Art <input type=hidden>, da es einfacher ist, die Informationen abzurufen out of inputNode.value, aber dies bedeutet, dass Sie ein bedeutungsloses Element in Ihrem HTML haben. HTML verfügt über das Element <meta> für Daten zum Dokument, und HTML 5 führt die Attribute data-* für Daten ein, die speziell zum Lesen mit JavaScript vorgesehen sind und bestimmten Elementen zugeordnet werden können.
  • Verunreinigt die Quelle - Daten, die PHP generiert, werden direkt an die HTML-Quelle ausgegeben, was bedeutet, dass Sie eine größere und weniger fokussierte Quelle erhalten HTML-Quelle.
  • Schwieriger, strukturierte Daten zu erhalten - Strukturierte Daten müssen gültiges HTML sein, ansonsten müssen Sie die Zeichenfolgen selbst konvertieren.
  • Verbindet PHP eng mit Ihrer Datenlogik - Da PHP in der Präsentation verwendet wird, können Sie nicht trennen die beiden sauber.

Implementierungsbeispiel

Die Idee dabei ist, eine Art Element zu erstellen, 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. Geben Sie die Daten direkt an JavaScript weiter

Dies ist wahrscheinlich am einfachsten zu verstehen.

Vorteile

  • Sehr einfach zu implementieren - Die Implementierung ist sehr einfach und verständlich.
  • Quelle nicht verschmutzt - Variablen werden direkt an JavaScript ausgegeben, daher ist das DOM nicht betroffen.

Nachteile

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

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!

840
Madara Uchiha

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 .

86

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

82
yuikonnu
<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.
36
Jessé Catrinck

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

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.

9
Yosra Nagati

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.

9
Danijel
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.

7
andrew

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");
}
5
qnimate
  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);
      }
   }
}
3
DeV

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;
?>
3
aequalsb

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>
    
3
Ramin Taghizada

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.

2
Jonathan199

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

Enter image description here

1
Supun Praneeth

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>';
1
Pedro Gimeno

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.

0
Amit Shah
<?php

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

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

?>
0
antelove