How to make php variables into javascript variables

Question

I am trying to figure out the best way I retrieve php variables with AJAX and then make those variables into javascript variables.

Let's say I have the following within my php file:

echo $total;
echo $actual;

Edit: JSON

echo json_encode($comments);

How can I turn these php variables into javascript variables within the AJAX call success: function (data) { or is there a better way to do this?

Return JSON from your PHP code. The resulting deserialised JS object can then hold both values. — Rory McCrossan, Nov 02 '16 at 16:38
Put it all in one array / object and return it all at once with `json_encode()`. Then you can easily parse it in javascript. — jeroen, Nov 02 '16 at 16:38
Do you use any php framework? I know a [package](https://github.com/laracasts/PHP-Vars-To-Js-Transformer) for laravel that does just that. — Armin Sam, Nov 02 '16 at 16:39
No framework. How can I parse it once I send it over a JSON? — Paul, Nov 02 '16 at 16:39
Let's say I am sending it from PHP like this now: `echo json_encode($total);` — Paul, Nov 02 '16 at 16:41
As you use jQuery, you can set the `dataType` to json and jQuery will do the parsing for you. You should post your javascript for a more detailed answer. — jeroen, Nov 02 '16 at 16:41
Paul, your question was closed as duplicate, but you still can accept any of the given answers. — Jose Manuel Abarca Rodríguez, Nov 02 '16 at 17:00

score 1 · Accepted Answer · answered Nov 02 '16 at 16:50

Create a result array to contain all of the variables you want to return. Encode the result instead of $comments.

$result = array('total' => $total, 'actual' => $actual);
echo json_encode($result);

In the JavaScript, set the dataType to json and jQuery will automatically parse it, then you can access the variables as properties of the success argument.

$.ajax({
    url : '...',
    type : 'post',
    dataType : 'json',
    success : function(result) {
        console.log( result.total );
        console.log( result.actual );
    }
});

Thanks. I never saw this answer posted. Worked perfectly. – Paul Dec 28 '16 at 17:11 — Paul, Dec 28 '16 at 17:11

score 0 · Answer 2 · answered Nov 02 '16 at 16:39

0

You have to do is json_encode, by doing it manually or by making array of these variables and retrieve it by ajax. By this you can make it java script variable.

answered Nov 02 '16 at 16:39

Waleed Ahmed Haris

1,229
11
17

score 0 · Answer 3 · answered Nov 02 '16 at 16:42

As soon as the page loads you will have to declare them as a global variables. This can either be done independently or using the window scope.

    <script>
    // On page load

    total = <?php echo $total; ?>;
    actual = <?php echo $actual; ?>;
    // OR
    window.total = <?php echo $total; ?>;
    window.actual = <?php echo $actual; ?>;
    </script>

Now you can use these variables in the success callbacks.

Jose Manuel Abarca Rodríguez · Answer 4 · 2016-11-02T17:27:37.603

Someone already used json so I'm going to use a simple string separator. Copy-paste next two codes in two files with the given names, then open ajax1.php in your browser :

ajax1.php

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
var total;   // JAVASCRIPT VARIABLE.
var actual;  // JAVASCRIPT VARIABLE.
function myAjax ()
{ $.ajax( { url     : "ajax2.php",
            success : function ( data )
                      { var arr = data.split("^^"); // ◄■■ SEPARATE DATA RETURNED.
                        total = arr[0]; // FIRST VALUE.
                        actual = arr[1]; // SECOND VALUE.
                        alert( total );
                        alert( actual );
                      },
            error   : function ( xhr )
                      { alert( "error" );
                      }
        } );
}
    </script>
  </head>
  <body>
    <button onclick="myAjax()">Click here</button>
  </body>
</html>

ajax2.php

<?php
$total = 450;
$actual = 10;
echo $total . "^^" . $actual; // "^^" IS THE SEPARATOR. ANYTHING CAN BE USED.
?>

How to make php variables into javascript variables

4 Answers4