如何将变量从php模板传递给javascript [复制]

Question

This question already has an answer here:

• How do I pass variables and data from PHP to JavaScript? 19 answers

I have a page where I want to display some points on map. I have small templates (like Smarty, but lighter) and there in template I have variable $points, that consists of coordinates of points I need. I need to pass them to javascript (because only javascript can render that map with points).

I have 3 variants of doing it. Can you tell, what is best?

1th way: (Template inserting javascript-tags with global variable)

tpl.php file:

<script>
MAP_POINTS = <?php echo json_encode($this->points); ?>;
</script>

.js file

function renderMap(){
var points = MAP_POINTS; // using global. Is it really bad? or who cares? =))
}

2nd way: (Passing variable through the HTML element)

tpl.php.file

<input type="hidden" 
       value="<?php echo json_encode($this->points); ?>" 
       id="map_points_container">

.js file

function renderMap(){
// without globals, but needed to be parsed on local side
var points = $.parseJSON ( $( "#map_points_container" ).val() );
}

3rd way: (AJAX-way)

I don't pass $this->points from template file at all. I have another .php file that handles all my AJAX requests:

Ajaxing.php

function get_map_points($params){
// some operations
return json_encode ($map_points);
}

And than on local side I'll have something like this:

.js file

$.post ( 'ajaxing.php', params, 
         function(points){
           renderMap(points);
         }, 'json');

The third way is usual, but if I already pass some values from template to local page, then I can pass and map points too. In fact, I don't need to make another request for only this map points (that's why I don't like third way)

But may be you can advise me another way? a better way?

The way I choosed:

1th way with little remarks. All my 'map-rendering' code is in another file and it's like:

$(function(){

MAP_APP = {};
MAP_APP.some_prop = null; // some properties
MAP_APP.some_method = function(){}; // some methods

});

So in template file I only have to extend my MAP_APP object:

<script>
MAP_APP.points = <?php echo json_encode($this->points); ?>;
</script>

Yes, global variable. But it's like namespace of whole application.

Thanks to everybody.

</div>

Answer 1

The first way is definitely the least complicated and fastest.

The second one adds an additional processing step (the parseJSON()) that isn't necessary.

The third way is good if you're dealing with lots of data that is optional (i.e. is needed only if the user requests it, and it isn't 100% sure whether that will happen) or dynamic. It creates a new request though, and is not going to be immediately available.

If you don't want to use globals, you could e.g. wrap your JavaScript functions into an object, and populate an object property from PHP:

<script>
MyObject.MAP_POINTS = <?php echo json_encode($this->points); ?>;
</script>