Hoe geef ik variabelen en gegevens van PHP door aan JavaScript?

Ik heb een variabele in PHP en ik heb de waarde ervan nodig in mijn JavaScript-code. Hoe kan ik mijn variabele van PHP naar JavaScript krijgen?

Ik heb code die er als volgt uitziet:

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

Ik heb JavaScript-code die valnodig heeft en lijkt in de trant van:

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

Antwoord 1, autoriteit 100%

Er zijn eigenlijk verschillende manieren om dit te doen. Sommige vereisen meer overhead dan andere, en sommige worden als beter beschouwd dan andere.

In willekeurige volgorde:

  1. Gebruik AJAX om de gegevens die je nodig hebt van de server te halen.
  2. Echo de gegevens ergens op de pagina en gebruik JavaScript om de informatie uit de DOM te halen.
  3. Echo de gegevens rechtstreeks naar JavaScript.

In dit bericht zullen we elk van de bovenstaande methoden onderzoeken en de voor- en nadelen van elk bekijken, evenals hoe we ze kunnen implementeren.

1. Gebruik AJAX om de gegevens die je nodig hebt van de server te halen

Deze methode wordt als de beste beschouwd, omdat uw server-side en client-side scripts volledig gescheiden zijn.

Pluspunten

  • Betere scheiding tussen lagen– Als u morgen stopt met het gebruik van PHP en wilt overstappen naar een servlet, een REST API of een andere service, hoeft u niet veel aan JavaScript te wijzigen code.
  • Meer leesbaar – JavaScript is JavaScript, PHP is PHP. Zonder de twee te mengen, krijgt u meer leesbare code op beide talen.
  • maakt asynchrone gegevensoverdracht mogelijk – het krijgen van de informatie van PHP kan tijd / middelen duur zijn. Soms wil je gewoon niet wachten op de informatie, de pagina laden en de informatie laten bereiken wanneer.
  • Gegevens worden niet rechtstreeks gevonden op de markup – dit betekent dat uw markup een aanvullende gegevens schoon wordt gehouden en alleen JavaScript ziet.

CONS

  • Latentie – Ajax Creëert een HTTP-verzoek en HTTP-aanvragen worden overgedragen aan het netwerk en hebben netwerklatenties.
  • Status – Gegevens die zijn opgehaald via een afzonderlijke HTTP-aanvraag bevatten geen informatie van het HTTP-verzoek dat het HTML-document opgehaalde. Mogelijk hebt u deze informatie nodig (bijvoorbeeld als het HTML-document wordt gegenereerd in reactie op een formulierinzending) en, als u dat doet, zal deze op de een of andere manier moeten overbrengen. Als u de gegevens in de pagina (die u hebt gebruikt als u deze hebt gebruikt als u deze techniek gebruikt) dan die u beperkt tot cookies / sessies die kunnen worden onderworpen aan racecondities.

Implementatievoorbeeld

Met Ajax hebt u twee pagina’s nodig, waarvan één is waar PHP de uitvoer genereert en de tweede is waar JavaScript deze uitvoer krijgt:

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 (of hoe de eigenlijke pagina ook heet)

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

De bovenstaande combinatie van de twee bestanden waarschuwt 42wanneer het bestand klaar is met laden.

Nog wat leesvoer

2. Echo de gegevens ergens op de pagina en gebruik JavaScript om de informatie uit de DOM te halen

Deze methode is minder voorkeur Ajax, maar heeft toch zijn voordelen. Het is nog steeds vrij gescheiden tussen PHP en JavaScript in de zin dat er geen PHP direct in het JavaScript.

Pros

  • Snel -. DOM operaties zijn vaak snel, en je kunt relatief snel op te slaan en toegang tot een grote hoeveelheid gegevens

Cons

  • Mogelijk Unsemantic Markup – Meestal wat er gebeurt is dat je een soort van <input type=hidden>om de informatie op te slaan, omdat het gemakkelijker is om het te krijgen informatie uit inputNode.value, maar dit betekent dat u een betekenisloos element in uw HTML. HTML heeft de <meta>element voor gegevens over het document en HTML 5 introduceert data-*attributen voor gegevens die specifiek voor het lezen van JavaScript die kunnen worden geassocieerd met specifieke elementen .
  • vervuilt de Source -. Gegevens die PHP genereert wordt rechtstreeks uitgevoerd naar de HTML source, wat betekent dat je een grotere en minder gericht HTML source krijgen
  • moeilijker te krijgen gestructureerde gegevens – Gestructureerde data zullen moeten geldige HTML zijn, anders zul je moeten ontsnappen en converteren strings zelf
  • .

  • Nauw koppels PHP om uw gegevens logica -. Omdat PHP wordt gebruikt in de presentatie, kun je niet scheiden de twee netjes

Uitvoeringsvoorbeeld

Met deze, het idee is om een ​​soort van element dat niet zal worden getoond aan de gebruiker aan te maken, maar is zichtbaar voor JavaScript.

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 de gegevens rechtstreeks naar JavaScript

Dit is waarschijnlijk het gemakkelijkst te begrijpen.

Pluspunten

  • Zeer eenvoudig te implementeren– Het kost heel weinig om dit te implementeren en te begrijpen.
  • Maakt bron niet vuil– Variabelen worden rechtstreeks naar JavaScript uitgevoerd, dus de DOM wordt niet beïnvloed.

Nadelen

  • Plaats PHP nauw aan uw gegevenslogica– Omdat PHP wordt gebruikt in de presentatie, kunt u de twee niet netjes scheiden.

Implementatievoorbeeld

Implementatie is relatief eenvoudig:

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

Veel succes!


Antwoord 2, autoriteit 11%

Ik gebruik meestal data-*-attributen 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>

Dit voorbeeld gebruikt jQuery, maar het kan worden aangepast voor een andere bibliotheek of vanille JavaScript.

Je kunt hier meer lezen over de dataset-eigenschap: https: //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset


Antwoord 3, autoriteit 10%

Ik ga een eenvoudiger antwoord proberen:

Uitleg van het probleem

Laten we eerst eens kijken naar de stroom van gebeurtenissen wanneer een pagina wordt weergegeven vanaf onze server:

  • Eerste PHP wordt uitgevoerd, het genereert de HTML die aan de client wordt aangeboden.
  • Vervolgens wordt de HTML aan de client geleverd, nadat PHP ermee klaar is, wil ik benadrukken dat zodra de code de server verlaat, PHP ermee klaar is en er geen toegang meer toe heeft.
  • Dan bereikt de HTML met JavaScript de client, die JavaScript op die HTML kan uitvoeren.

Het belangrijkste om hier te onthouden is dat HTTP stateloos is. Zodra een verzoek de server heeft verlaten, kan de server het niet meer aanraken. Dus dat laat onze opties over om:

  1. Stuur meer verzoeken van de klant nadathet eerste verzoek is gedaan.
  2. Coder wat de server te zeggen had in het eerste verzoek.

Oplossingen

Dat is de kernvraag die je jezelf moet stellen is:

Schrijf ik een website of een applicatie?

Websites zijn voornamelijk paginagebaseerd en de laadtijden van de pagina’s moeten zo snel mogelijk zijn (bijvoorbeeld – Wikipedia). Webapplicaties zijn AJAX-zwaar en voeren veel heen en weer uit om de klant snel informatie te krijgen (bijvoorbeeld – een voorraaddashboard).

Website

Het verzenden van meer verzoeken van de client nadat het eerste verzoek is gedaan, is traagomdat het meer HTTP-verzoeken vereist die aanzienlijke overhead met zich meebrengen. Bovendien vereist het asynchronousiteitomdat het maken van een AJAX-verzoek een handler vereist voor wanneer het voltooid is.

Ik zou nietaanraden om nog een verzoek in te dienen tenzij uw site een applicatie isom die informatie van de server te krijgen.

U wilt snelle reactietijden die een enormeimpact hebben op conversie- en laadtijden. Het maken van Ajax-verzoeken is in dit geval traag voor de initiële uptime en onnodig.

Je hebt twee manieren om het probleem aan te pakken

  • Stel een cookie in– cookies zijn headers die worden verzonden in HTTP-verzoeken die zowel de server als de client kunnen lezen.
  • Coder de variabele als JSON– JSON lijkt erg op JavaScript-objecten en de meesteJSON-objecten zijn geldige JavaScript-variabelen.

Het instellen van een cookieis echt niet erg moeilijk, je wijst gewoon het is een waarde:

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

Vervolgens kunt u het lezen met JavaScriptmet document.cookie:

Hier is een korte handgerolde parser, maar het antwoord dat ik hier boven heb gelinkt, heeft beter geteste:

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 zijn goed voor een beetje gegevens. Dit is wat trackingservices vaak doen.

Zodra we meer gegevens hebben, kunnen we deze in plaats daarvan coderen met JSON in een JavaScript-variabele:

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

Ervan uitgaande dat $valuejson_encodegeschikt is aan de PHP-kant (meestal is dit). Deze techniek doet Stack Overflow bijvoorbeeld met zijn chat (alleen .NET gebruiken in plaats van PHP).

Toepassing

Als je een applicatie schrijft – plotseling is de initiële laadtijd niet altijd zo belangrijk als de voortdurende prestaties van de applicatie, en het begint vruchten af te werpen om gegevens en code afzonderlijk te laden.

Mijn antwoord hierlegt uit hoe je gegevens laadt met AJAX in JavaScript:

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

Of met jQuery:

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

Nu, de server moet gewoon een /your/urlroute / -bestand bevatten die code bevat die de gegevens grijpt en er iets mee doet, in uw geval:

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

Op deze manier vraagt ​​ons Javascript-bestand om de gegevens en toont het in plaats van te vragen naar code of voor de lay-out. Dit is schoner en begint te betalen omdat de toepassing hoger wordt. Het is ook een betere scheiding van bezorgdheid en het kan het testen van de client-zijcode zonder enige server-side-technologie die een ander pluspunt is.

PostScript: U moet zeer bewust zijn van XSS-aanvalsvectoren wanneer u iets injecteert van PHP naar JavaScript. Het is zeer moeilijk om de waarden goed te ontsnappen en het is contextgevoelig. Als je niet zeker weet hoe je moet omgaan met XSS, of niet op de hoogte van het – lees dan Dit OWAP-artikel , deze en Deze vraag .


Antwoord 4, Autoriteit 4%

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

JSON_ENCODE () vereist:

  • PHP 5.2.0 of meer
  • $PHPVarGecodeerd als UTF-8, Unicode.

Antwoord 5, Autoriteit 3%

Gebruik eenvoudig een van de volgende methoden.

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

OF

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

Antwoord 6

Ik vind de manier waarop WordPress werkt erg goed met zijn in de wachtrij plaatsenen lokaliseerfuncties, dus volgens dat model schreef ik een eenvoudige klasse voor het plaatsen van een script in een pagina volgens de scriptafhankelijkheden, en voor het beschikbaar stellen van aanvullende gegevens voor het script.

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

De aanroep van de functie enqueue_script()is voor het toevoegen van een script, het instellen van de bron en afhankelijkheden van andere scripts en aanvullende gegevens die nodig zijn voor het script.

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

En de print_scripts()methode van het bovenstaande voorbeeld stuurt deze uitvoer:

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

Ongeacht het feit dat het script ‘jquery’ in de wachtrij wordt geplaatst na de ‘jquery-ui’, wordt het eerder afgedrukt omdat het in ‘jquery-ui’ is gedefinieerd dat het afhankelijk is van ‘jquery’.
Aanvullende gegevens voor het ‘custom-script’ bevinden zich in een nieuw scriptblok en worden ervoor geplaatst. Het bevat een mydata-object dat aanvullende gegevens bevat, nu beschikbaar voor ‘custom-script’.


Antwoord 7

Probeer dit:

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

-Na dit een tijdje geprobeerd te hebben

Hoewel het werkt, vertraagt het de prestaties. Omdat PHP een script aan de serverzijde is, terwijl JavaScript een gebruikerszijde is.


Antwoord 8

Ik heb een eenvoudige methode bedacht om JavaScript-variabelen toe te wijzen met behulp van PHP.

Het gebruikt HTML5-gegevenskenmerken om PHP-variabelen op te slaan en wordt vervolgens toegewezen aan JavaScript bij het laden van de pagina.

Een complete tutorial is hierte vinden.

Voorbeeld:

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

Antwoord 9

  1. Converteer de gegevens in JSON
  2. bel ajax om JSON bestand
  3. te ontvangen

  4. Converteer JSON in JavaScript Object

Voorbeeld:

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

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

Antwoord 10

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

Het werkt niet omdat $valniet gedefinieerd is voor zover het JavaScript betreft, d.w.z. de PHP-code heeft niets uitgevoerd voor $val. Probeer de bron in uw browser te bekijken en dit is wat u zult zien:

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

En

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

Dit werkt niet omdat PHP zal proberen myPluginals een constante te behandelen en als dat niet lukt, zal het proberen het te behandelen als de string 'myPlugin'die het zal proberen samen te werken met de uitvoer van de PHP-functie start()en aangezien dat niet gedefinieerd is, zal het een fatale fout produceren.

En

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

Hoewel dit waarschijnlijk werkt, aangezien de PHP-code geldig JavaScript produceert met de verwachte argumenten, is de kans groot dat als het niet werkt, myPluginnog niet klaar is. Controleer uw volgorde van uitvoering.

Houd er ook rekening mee dat de uitvoer van de PHP-code onveilig is en moet worden gefilterd met json_encode().

BEWERKEN

Omdat ik de ontbrekende haakjes in myPlugin.start(<?=$val?>:-\

niet heb opgemerkt

Zoals @Second Rikudo aangeeft, moet $val, om correct te werken, het haakje sluiten bevatten, bijvoorbeeld: $val="42);"

Dit betekent dat de PHP nu myPlugin.start(42);zal produceren en zal werken zoals verwacht wanneer uitgevoerd door de JavaScript-code.


Antwoord 11

Hier is er een die ik niet als een optie zie gepost. Het is vergelijkbaar met het gebruik van Ajax, maar duidelijk anders.

Stel eerst de bron van een script rechtstreeks in op een PHP-bestand.

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

Je zou zelfs een variabele terug kunnen sturen naar het PHP-bestand, zoals dit voorbeeld:

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

Vervolgens 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 addslashes( $val ); ?>";
    var example2 = "<?php echo "he said \\"the value\\""; ?>";
    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;
?>

Antwoord 12

Dit is de truc:

  1. Hier is uw ‘PHP’om die variabele te gebruiken:

    <?php
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
    
  2. Je hebt nu een JavaScript-variabele met de naam 'name', en hier is je JavaScript-code om die variabele te gebruiken:

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

Antwoord 13

Stel dat uw variabele altijd een geheel getal is. In dat geval is dit makkelijker:

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

Uitvoer:

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

Stel dat je variabele geen geheel getal is, maar als je bovenstaande methode probeert, krijg je zoiets als dit:

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

Maar in JavaScript is dit een syntaxisfout.

Dus in PHP hebben we een functieaanroep json_encodedie een string codeert naar een JSON-object.

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

Aangezien abcdin JSON "abcd"is, ziet het er als volgt uit:

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

U kunt dezelfde methode gebruiken voor arrays:

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

En uw JavaScript-code ziet er als volgt uit:

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

Console-uitvoer


Antwoord 14

Na veel onderzoek ontdekte ik dat de gemakkelijkste methode is om allerlei variabelen gemakkelijk door te geven.

In het serverscript heb je twee variabelen en je probeert ze naar de clientscripts te sturen:

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

In al je JavaScript-codes die op de pagina worden aangeroepen, roep je die variabelen gewoon aan.


Antwoord 15

Ik neem aan dat de te verzenden gegevens een string zijn.

Zoals andere commentatoren hebben aangegeven, is AJAX een mogelijke oplossing, maar de nadelen wegen zwaarder dan de voordelen: het heeft een latentie en is moeilijker te programmeren (het heeft de code nodig om de waarde zowel aan de server- als aan de clientzijde op te halen), wanneer een eenvoudigere escape-functie zou moeten volstaan.

Dus we zijn weer aan het ontsnappen. json_encode($string)werkt alsu de broncode eerst als UTF-8 codeert voor het geval dat dit nog niet het geval is, omdat json_encodeUTF- vereist 8 gegevens. Als de string in ISO-8859-1 is, kun je eenvoudig json_encode(utf8_encode($string))gebruiken; anders kun je altijd iconvgebruiken om eerst de conversie uit te voeren.

Maar er is een groot probleem. Als je het in evenementen gebruikt, moet je htmlspecialchars()uitvoeren op het resultaat om het de juiste code te maken. En dan moet je ofwel voorzichtig zijn met het gebruik van dubbele aanhalingstekens om de gebeurtenis te omsluiten, of altijd ENT_QUOTEStoevoegen aan htmlspecialchars. Bijvoorbeeld:

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

U kunt htmlspecialcharsechter niet gebruiken op reguliere JavaScript-code (code ingesloten in <script></script>-tags). Dat maakt gebruik van deze functie gevoelig voor fouten, door het resultaat te vergeten htmlspecialcharsbij het schrijven van gebeurteniscode.

Het is mogelijk om een functie te schrijven die dat probleem niet heeft en die zowel in gebeurtenissen als in reguliere JavaScript-code kan worden gebruikt, zolang u uw gebeurtenissen maar altijd tussen enkele aanhalingstekens of altijd tussen dubbele aanhalingstekens plaatst. Hier is mijn voorstel, waarbij ze tussen dubbele aanhalingstekens moeten staan (waar ik de voorkeur aan geef):

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

De functie vereist PHP 5.4+. Voorbeeldgebruik:

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

Antwoord 16

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (YEEXNABAL.JS)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

output

De appelkleur is geel, de aardbeienkleur is rood en de kiwi
Kleur is groen.


Antwoord 17

volgens uw code

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

Nu kunt u waarde krijgen met DOM, gebruik innerhtml van span-ID, in dit geval hoeft u geen oproep aan server of Ajax of een ander ding te doen.

Uw pagina zal het afdrukken met PHP en u JavaScript krijgt waarde met DOM.


Antwoord 18

<?php
    $val = $myService->getValue(); // Makes an API and database call
    echo "
        <script>
            myPlugin.start({$val});
        </script> ";
?>

Antwoord 19

Gebruik:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

en dat zal werken. Het is gewoon een JavaScript-variabele toewijzen en vervolgens de waarde van een bestaande PHP-variabele doorgeven. Omdat PHP de JavaScript-regels hier schrijft, heeft het de waarde van de PHP-variabele en kan het deze direct doorgeven.

Other episodes