How do I pass variables and data from PHP to JavaScript

Question

I have a variable in PHP  and I need its value in my JavaScript code  How can I get my variable from PHP to JavaScript   I have code that looks like this    lt  php                val    myService- gt getValue       Makes an API and database call   gt    I have JavaScript code that needs val and looks along the lines of    lt script gt      myPlugin start  val      I tried this  but it didn t work      lt  php myPlugin start  val     gt     This didn t work either     myPlugin start  lt    val  gt     This works sometimes  but sometimes it fails  lt  script gt

User · Answer

I quite like the way the WordPress works with its enqueue and localize functions, so following that model, I wrote a simple class for putting a scripts into page according to the script dependencies, and for making additional data available for the 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;
        }
    }
}

The call to the enqueue_script() function is for adding script, setting the source and dependencies on other scripts, and additional data needed for the 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();

And, print_scripts() method of the above example will send this output:

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

Regardless the fact that the script 'jquery' is enqueued after the 'jquery-ui', it is printed before because it is defined in 'jquery-ui' that it depends on 'jquery'. Additional data for the 'custom-script' are inside a new script block and are placed in front of it, it contains mydata object that holds additional data, now available to 'custom-script'.

User · Answer

I m going to try a simpler answer  Explanation of the problem First  let s understand the flow of events when a page is served from our server   First PHP is run  it generates the HTML that is served to the client  Then  the HTML is delivered to the client  after PHP is done with it  I d like to emphasize that once the code leaves the server - PHP is done with it and can no longer access it  Then  the HTML with JavaScript reaches the client  which can execute JavaScript on that HTML   So really  the core thing to remember here is that HTTP is stateless  Once a request left the server  the server can not touch it  So  that leaves our options to   Send more requests from the client after the initial request is done  Encode what the server had to say in the initial request   Solutions That s the core question you should be asking yourself is  Am I writing a website or an application  Websites are mainly page based  and the page load times needs to be as fast as possible  for example - Wikipedia   Web applications are more AJAX heavy and perform a lot of round trips to get the client fast information  for example - a stock dashboard   Website Sending more requests from the client after the initial request is done is slow as it requires more HTTP requests which have significant overhead  Moreover  it requires asynchronousity as making an AJAX request requires a handler for when it s complete  I would not recommend making another request unless your site is an application for getting that information from the server  You want fast response times which have a huge impact on conversion and load times  Making Ajax requests is slow for the initial uptime in this case and unneeded  You have two ways to tackle the issue  Set a cookie - cookies are headers sent in HTTP requests that both the server and client can read  Encode the variable as JSON - JSON looks very close to JavaScript objects and most JSON objects are valid JavaScript variables   Setting a cookie is really not very difficult  you just assign it a value  setcookie  quot MyCookie quot    value      Sets the cookie to the value  remember  do not                                   Set it with HTTP only to true   Then  you can read it with JavaScript using document cookie  Here is a short hand rolled parser  but the answer I linked to right above this has better tested ones  var cookies   document cookie split  quot   quot        map function el   return el split  quot   quot            reduce function prev cur   prev cur 0     cur 1  return prev         cookies  quot MyCookie quot      Value set with PHP   Cookies are good for a little data  This is what tracking services often do  Once we have more data  we can encode it with JSON inside a JavaScript variable instead   lt script gt      var myServerData    lt   json encode  value   gt      Don t forget to sanitize                                                    server data  lt  script gt   Assuming  value is json encodeable on the PHP side  it usually is   This technique is what Stack Overflow does with its chat for example  only using  NET instead of PHP   Application If you re writing an application - suddenly the initial load time isn t always as important as the ongoing performance of the application  and it starts to pay off to load data and code separately  My answer here explains how to load data using 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    quot  echo json quot    httpRequest send     Or with jQuery    get  quot  your url quot   done function data          What do I do with the data       Now  the server just needs to contain a  your url route file that contains code that grabs the data and does something with it  in your case   lt  php                val   myService- gt getValue       Makes an API and database call      echo json encode  val      Write it to the output    gt   This way  our JavaScript file asks for the data and shows it rather than asking for code or for layout  This is cleaner and starts to pay off as the application gets higher  It s also better separation of concerns and it allows testing the client side code without any server side technology involved which is another plus  Postscript  You have to be very aware of XSS attack vectors when you inject anything from PHP to JavaScript  It s very hard to escape values properly and it s context sensitive  If you re unsure how to deal with XSS  or unaware of it - please read this OWASP article  this one and this question

User · Answer

PHP   fruits   array  apple    gt   yellow    strawberry    gt   red    kiwi    gt   green     lt script gt      var color    lt  php echo json encode  fruits    gt    lt  script gt   lt script src     yourexternal js  gt  lt  script gt    JS  yourexternal js   alert  The apple color is    color  apple        the strawberry color is     color  strawberry       and the kiwi color is     color  kiwi             OUTPUT     The apple color is yellow  the strawberry color is red and the kiwi   color is green

User · Answer

Here is one I do not see posted as an option  It is similar to using Ajax  but clearly different   First  set a script s source directly to a PHP file    lt script type  text javascript  src  url to your php file php    gt  lt  script gt    You could even pass a variable back to the PHP file such as this example    lt script type  text javascript  src  url to your php file php var1 value1    gt  lt  script gt    Then in  your php file php     lt  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- gt getValue      gt   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    lt  php echo        val          gt       var example2    lt  php echo        value          gt       var example3    lt  php echo   some other data      gt       alert  example1           example2        lt  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    gt

User · Answer

I ll assume that the data to transmit is a string   As other commenters have stated  AJAX is one possible solution  but the cons outweigh the pros  it has a latency and it is harder to program  it needs the code to retrieve the value both server- and client-side   when a simpler escaping function should suffice   So  we re back to escaping  json encode  string  works if you encode the source string as UTF-8 first in case it is not already  because json encode requires UTF-8 data  If the string is in ISO-8859-1 then you can simply use json encode utf8 encode  string    otherwise you can always use iconv to do the conversion first   But there s a big gotcha  If you re using it in events  you need to run htmlspecialchars   on the result in order to make it correct code  And then you have to either be careful to use double quotes to enclose the event  or always add ENT QUOTES to htmlspecialchars  For example    lt  php      myvar    I m in   UTF-8   encoding and I have  lt script gt script tags lt  script gt   amp  ampersand           Fails        echo   lt body onload  alert    json encode  myvar        gt           Fails        echo   lt body onload  alert    json encode  myvar        gt           Fails        echo   lt body onload  alert    htmlspecialchars json encode  myvar         gt            Works        echo   lt body onload  alert    htmlspecialchars json encode  myvar   ENT QUOTES        gt           Works      echo   lt body onload  alert    htmlspecialchars json encode  myvar         gt         echo   lt  body gt      However  you can t use htmlspecialchars on regular JavaScript code  code enclosed in  lt script gt     lt  script gt  tags   That makes use of this function prone to mistakes  by forgetting to htmlspecialchars the result when writing event code   It s possible to write a function that does not have that problem  and can be used both in events and in regular JavaScript code  as long as you enclose your events always in single quotes  or always in double quotes  Here is my proposal  requiring them to be in double quotes  which I prefer     lt  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            The function requires PHP 5 4   Example usage    lt  php      myvar    I m in   UTF-8   encoding and I have  lt script gt script tags lt  script gt   amp  ampersand           Note use of double quotes to enclose the event definition      echo   lt body onload  alert    escapeJSString  myvar        gt           Example with regular code      echo   lt script gt alert    escapeJSString  myvar       lt  script gt        echo   lt  body gt

User · Answer

Use    lt  php      your php variable  22      echo   lt script type  text javascript  gt var your javascript variable    your php variable  lt  script gt      gt    and that will work  It s just assigning a JavaScript variable and then passing the value of an existing PHP variable  Since PHP writes the JavaScript lines here  it has the value of of the PHP variable and can pass it directly

User · Answer

Let s say your variable is always integer  In that case this is easier    lt  PHP      number   4       echo   lt script gt        echo  var number        number            echo  alert number         echo   lt  script gt      gt    Output    lt script gt var number   4 alert number   lt  script gt    Let s say your variable is not an integer  but if you try above method you will get something like this    lt script gt var number   abcd alert number   lt  script gt    But in JavaScript this is a syntax error   So in PHP we have a function call json encode that encode string to a JSON object    lt  PHP      number    abcd        echo   lt script gt        echo  var number       json encode  number             echo  alert number         echo   lt  script gt      gt    Since abcd in JSON is  abcd   it looks like this    lt script gt var number    abcd  alert number   lt  script gt    You can use same method for arrays    lt  PHP      details          name    gt   supun        age    gt  456       weight    gt   55              echo   lt script gt        echo  var details       json encode  details             echo  alert details         echo  console log details         echo   lt  script gt      gt    And your JavaScript code looks like this    lt script gt var details     name   supun   age  456  weight   55   alert details  console log details   lt  script gt    Console output

User · Answer

Convert the data into JSON  Call AJAX to recieve JSON file Convert JSON into Javascript object   Example   STEP 1   lt  php      servername    localhost       username           password           dbname           conn   new mysqli  servername   username   password   dbname       if   conn- gt connect error          die  Connection failed       conn- gt connect error              sql    SELECT id  name  image FROM phone       result    conn- gt query  sql       while  row    result- gt fetch assoc             v      row              echo json encode  v       conn- gt close      gt    STEP 2  function showUser fnc       var xhttp   new XMLHttpRequest        xhttp onreadystatechange   function           if  this readyState    4  amp  amp  this status    200                STEP 3              var p   JSON parse this responseText

User · Answer

After much research  I found the easiest method is to pass all kinds of variables easily   In the server script  you have two variables  and you are trying to send them to the client scripts    php var1   Hello world    php var2   Helloow   echo   lt script gt    echo  var js variable1      json encode  php var1         echo  var js variable2      json encode  php var2         echo   lt  script gt      In any of your JavaScript code called on the page  simply call those variables

User · Answer

Try this    lt  php     echo   lt script gt  var x       json encode  phpVariable      lt  script gt      gt    --  -After trying this for a while  Although it works  however it slows down the performance  As PHP is a server-side script while JavaScript is a user side

User · Answer

lt script gt    var jsvar    lt  php echo json encode  PHPVar     gt    lt  script gt    json encode   requires    PHP 5 2 0 or more  PHPVar encoded as UTF-8  Unicode

User · Answer

Here is is the trick    Here is your  PHP  to use that variable    lt  php      name    PHP variable       echo   lt script gt        echo  var name       json encode  name             echo   lt  script gt      gt   Now you have a JavaScript variable called  name   and here is your JavaScript code to use that variable    lt script gt       console log  I am everywhere     name    lt  script gt

User · Answer

Simply use one of the following methods    lt script type  text javascript  gt  var js variable      lt  php echo  php variable   gt     lt script gt    OR    lt script type  text javascript  gt      var js variable    lt  php echo json encode  php variable     gt     lt  script gt

User · Answer

I have come out with an easy method to assign JavaScript variables using PHP    It uses HTML5 data attributes to store PHP variables and then it s assigned to JavaScript on page load   A complete tutorial can be found here   Example    lt  php      variable 1    QNimate        variable 2    QScutter     gt       lt span id  storage  data-variable-one   lt  php echo  variable 1    gt   data-variable-two   lt  php echo  variable 2    gt   gt  lt  span gt   lt  php   Here is the 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

User · Answer

There are actually several approaches to do this  Some require more overhead than others  and some are considered better than others   In no particular order    Use AJAX to get the data you need from the server  Echo the data into the page somewhere  and use JavaScript to get the information from the DOM  Echo the data directly to JavaScript    In this post  we ll examine each of the above methods  and see the pros and cons of each  as well as how to implement them   1  Use AJAX to get the data you need from the server  This method is considered the best  because your server side and client side scripts are completely separate   Pros   Better separation between layers - If tomorrow you stop using PHP  and want to move to a servlet  a REST API  or some other service  you don t have to change much of the JavaScript code  More readable - JavaScript is JavaScript  PHP is PHP  Without mixing the two  you get more readable code on both languages  Allows for asynchronous data transfer - Getting the information from PHP might be time resources expensive  Sometimes you just don t want to wait for the information  load the page  and have the information reach whenever  Data is not directly found on the markup - This means that your markup is kept clean of any additional data  and only JavaScript sees it    Cons   Latency - AJAX creates an HTTP request  and HTTP requests are carried over network and have network latencies  State - Data fetched via a separate HTTP request won t include any information from the HTTP request that fetched the HTML document  You may need this information  e g   if the HTML document is generated in response to a form submission  and  if you do  will have to transfer it across somehow  If you have ruled out embedding the data in the page  which you have if you are using this technique  then that limits you to cookies sessions which may be subject to race conditions    Implementation Example  With AJAX  you need two pages  one is where PHP generates the output  and the second is where JavaScript gets that output   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  or whatever the actual page is named like    lt  -- snip -- gt   lt script gt      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     lt  script gt   lt  -- snip -- gt    The above combination of the two files will alert 42 when the file finishes loading   Some more reading material   Using XMLHttpRequest - MDN XMLHttpRequest object reference - MDN How do I return the response from an asynchronous call    2  Echo the data into the page somewhere  and use JavaScript to get the information from the DOM  This method is less preferable to AJAX  but it still has its advantages  It s still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript   Pros   Fast - DOM operations are often quick  and you can store and access a lot of data relatively quickly    Cons   Potentially Unsemantic Markup - Usually  what happens is that you use some sort of  lt input type hidden gt  to store the information  because it s easier to get the information out of inputNode value  but doing so means that you have a meaningless element in your HTML  HTML has the  lt meta gt  element for data about the document  and HTML 5 introduces data-  attributes for data specifically for reading with JavaScript that can be associated with particular elements  Dirties up the Source - Data that PHP generates is outputted directly to the HTML source  meaning that you get a bigger and less focused HTML source  Harder to get structured data - Structured data will have to be valid HTML  otherwise you ll have to escape and convert strings yourself  Tightly couples PHP to your data logic - Because PHP is used in presentation  you can t separate the two cleanly    Implementation Example  With this  the idea is to create some sort of element which will not be displayed to the user  but is visible to JavaScript   index php   lt  -- snip -- gt   lt div id  dom-target  style  display  none   gt       lt  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           gt   lt  div gt   lt script gt      var div   document getElementById  dom-target        var myData   div textContent   lt  script gt   lt  -- snip -- gt    3  Echo the data directly to JavaScript  This is probably the easiest to understand   Pros   Very easily implemented - It takes very little to implement this  and understand  Does not dirty source - Variables are outputted directly to JavaScript  so the DOM is not affected    Cons   Tightly couples PHP to your data logic - Because PHP is used in presentation  you can t separate the two cleanly    Implementation Example  Implementation is relatively straightforward    lt  -- snip -- gt   lt script gt      var data    lt  php echo json encode  42   JSON HEX TAG     gt      Don t forget the extra semicolon   lt  script gt   lt  -- snip -- gt    Good luck

User · Answer

lt  php       val    myService- gt getValue       Makes an API and database call      echo            lt script gt              myPlugin start   val             lt  script gt        gt

User · Answer

myPlugin start  val      Tried this  didn t work   It doesn t work because  val is undefined as far as JavaScript is concerned  i e  the PHP code did not output anything for  val  Try viewing the source in your browser and here is what you ll see   myPlugin start       I tried this  and it didn t work   And   lt  php myPlugin start  val     gt     This didn t work either   This doesn t work because PHP will try to treat myPlugin as a constant and when that fails it will try to treat it as the string  myPlugin  which it will try to concatenate with the output of the PHP function start   and since that is undefined it will produce a fatal error   And   myPlugin start  lt    val  gt     This works sometimes  but sometimes it fails   While this is most likely to work  since the PHP code is producing valid JavaScript with the expected arguments  if it fails  chances are it s because myPlugin isn t ready yet  Check your order of execution   Also you should note that the PHP code output is insecure and should be filtered with json encode     EDIT  Because I didn t notice the missing parenthesis in myPlugin start  lt    val  gt   -   As  Second Rikudo points out  for it to work correctly  val would need to contain the closing parenthesis  for example   val  42     Meaning that the PHP will now produce myPlugin start 42   and will work as expected when executed by the JavaScript code

User · Answer

As per your code   lt  php       val    myService- gt getValue       Makes an API and database call      echo   lt span id  value  gt    val   lt  span gt      gt    Now you can get value using DOM  use innerHTML of span id  in this case you don t need to do any call to server  or Ajax or another thing   Your page will print it using PHP  and you JavaScript will get value using DOM

User · Answer

I usually use data-  attributes in HTML    lt div class  service-container  data-service   lt  php echo  myService- gt getValue      gt   gt    lt  div gt    lt script gt        document  ready function                 service-container   each function                 var container     this               var service   container data  service                    Variable  service  now contains the value of  myService- gt getValue                         lt  script gt    This example uses jQuery  but it can be adapted for another library or vanilla JavaScript   You can read more about the dataset property here  https   developer mozilla org en-US docs Web API HTMLElement dataset

[javascript] How do I pass variables and data from PHP to JavaScript?

Examples related to javascript

Examples related to php