send data from php to javascript

Question

I have a question regarding data transmission from php to javascript. I gather some data from database and I format them like this:

for($i=0;$i<(sizeof($lt_periods_query['period_id']));$i++){

    $period_id   = $lt_periods_query['period_id'][$i];
    $lt_id       = $lt_periods_query['lt_id'][$i];
    $period_name = $lt_periods_query['period_name'][$i];
    $fDate       = $lt_periods_query['fromDate'][$i];
    $tDate       = $lt_periods_query['toDate'][$i];
    $minStay     = $lt_periods_query['min_stay'][$i];
    $nightly_rate= $lt_periods_query['nightly_rate'][$i];

    if (strStartsWith($fDate, $currentYear)=='true'){
        $year = $currentYear;
    } else if(strStartsWith($fDate, $nextYear)=='true'){
        $year = $nextYear;
    }

    $temp_period_details   =  array();
    $temp_period_details['period_id'] = $period_id;
    $temp_period_details['lt_id'] = $lt_id;
    $temp_period_details['period_name'] = $period_name;
    $temp_period_details['fromDate'] = $fDate;
    $temp_period_details['toDate'] = $tDate;
    $temp_period_details['min_stay'] = $minStay;
    $temp_period_details['nightly_rate'] = $nightly_rate;

    $periods[$year][$period_name] = $temp_period_details;
}

And I am able to see them when I print as like this:

echo "RULE for 6 days <br>";
$days= '5';
$selPeriod = 'off_peak';
$selYear = '2011';
echo $periods[$selYear][$selPeriod]['period_id'];
echo "<br>";
echo $periods[$selYear][$selPeriod]['lt_id'];
echo "<br>";
echo $periods[$selYear][$selPeriod]['period_name'];

I know that php is working on the server side and javascript is working on the client side. I want to get the data from javascript side by sending some parameters like this (I know why this is not working but I do not know how I can achieve such data transfers):

    <script type="text/javascript">

    $(function(){

        getData();

        function getData(){

            var days= '5';
            var selPeriod = 'off_peak';
            var selYear = '2011';


            //var xxx     = '<?php echo $periods[\''+selYear+'\'][\''+selPeriod+'\'][\'fromDate\'] ;?>';
            //var xxx = '<?php include($periods['2011']['off_peak'][''])?>;

        }

    });

Can anyone advice me a way to gather data from php to javascript by sending some parameters.

Answer 1

To communicate data structures from PHP to Javascript, inject a JSON value like this:

<?php
     $xdata = array(
          'foo'    => 'bar',
          'baz' => array('green','blue')
     );
?>
<script type="text/javascript">
    var xdata = <?php echo json_encode($xdata); ?>;

    alert(xdata['foo']);
    alert(xdata['baz'][0]);

    // Dot notation can be used if key/name is simple:
    alert(xdata.foo);
    alert(xdata.baz[0]);
</script>

This can be used to properly escape scalars, arrays, objects, etc.

Answer 2

Simple AJAX approach.

Put all your data into single array. Then use json_encode to encode your data to JSON format.

$data_array = array();

//assigning your data to single array here
$data_array['param1'] = 'value1';

echo json_encode($data_array);

Then in your JavaScript code use AJAX to call you script. For example use great jQuery library for this (http://api.jquery.com/jQuery.getJSON/).

<script type="text/javascript">    

$.getJSON('http://www.example.com/my_script.php', function(data) {
    alert(data.param1); //this should alert 'value1'
});

Answer 3

There's the AJAX method, and there's the echoing method. The former is more flexible, while the latter is a lot simpler and doesn't require you to cope with AJAX errors.

For the former, there are plenty of examples around the place on how to use AJAX. The latter can be achieved quite simply:

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

Which approach is approporite depends on what data your javascript needs and what it needs it for. If you're needing to do a lot of server interaction, then working with AJAX is the avenue you should be investigating. However, if all you need is an initial value to initialize a javascript, then the latter approach is a lot easier to implement.