Use JSONP To Return an Array From PHP to JavaScript

I am attempting to use JSONP to return an array from PHP to JavaScript. Hopefully, my code will demon开发者_C百科strate exactly what I'm trying to do because I am not even so sure how to word it...

My PHP file, port 80, hence the need to use JSONP and not JSON (I tried already) I am not sure if I am forming the $_GET variables correctly either, I'm pretty certain it's wrong though and my lack of knowledge is the reason for this...

<?php
$directory = './thumbnails/';

// create a handler to the directory
$dirhandler = opendir($directory);

// read all the files from directory
$nofiles=0;
while (false !== ($file = readdir($dirhandler))) {

// if $file isn't this directory or its parent 
//add to the $files array
        if ($file != '.' && $file != '..')
        { 
            $thumbs[$nofiles]= 'http://localhost:80/mapScripts/thumbnails/' . $file; 
            $nofiles++;               
        }   
}

//$i = rand(0, 3);


//$output = "{";
for($i=0; $i < 3; $i++){
$json[i] = json_encode($thumbs[$i]); 
$output = $output . $_GET['thumbnails' . $i]. "(".$json[i].")";
//$output = $output . "'thumb" . $i . "':'" . $thumbs[$i] . "',";
}

//$output = $output . "}";
//echo $_GET['thumbnails'] ."(".$json.")";

echo $output;

?>

Then in JavaScript on port 8080 (cross-domain and yes it worked fine until I tried to use this array as opposed to just passing one image url) I want to get each image url from the PHP array so that I can make icons using the image..

function makeThumbs(data, layer){
                var icon = new OpenLayers.Icon(data);
                layer.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(93.9, 29.53).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),icon));
                for(var m = 0; m < layer.markers.length; m++){
                    layer.markers[m].events.register("click", layer.markers[m], function clickIcon(e){alert("How are you?");});
                    $("[id$=innerImage]").css({"border-style":"solid","border-width":"3px","border-color": "white"});
                }
            }

            $.getJSON('http://localhost:80/mapScripts/getThumbs.php?thumbnails2=?', function(data) {makeThumbs(data, markers);});

again the url I am passing to the $.getJSON method is also probably wrong. I need to know how to select the exact photo url from the array being passed, not all the JSONP data.

I appreciate your time and feedback for helping me with this.

elshae

I actually found one way of doing it..Here goes..

<?php
$directory = './thumbnails/';

// create a handler to the directory
$dirhandler = opendir($directory);

// read all the files from directory
$nofiles=0;
while (false !== ($file = readdir($dirhandler))) {

// if $file isn't this directory or its parent 
//add to the $files array
        if ($file != '.' && $file != '..')
        { 
            $thumbs[$nofiles]= 'http://localhost:80/mapScripts/thumbnails/' . $file; 
            $nofiles++;               
        }   
}

//$i = rand(0, 3);


$output = $_GET['thumbnails'] . "({";
for($i=0; $i < 3; $i++){
//$json[i] = json_encode($thumbs[$i]); 
//$output = $output . $_GET['thumbnails' . $i]. "(".$json[i].")";
$output = $output . "'thumb" . $i . "':'" . $thumbs[$i] . "',";
}

$output = $output . "})";
//echo $_GET['thumbnails'] ."(".$json.")";

echo $output;

?>

That outputs: ({'thumb0':'http://localhost:80/mapScripts/thumbnails/Tibet2.jpeg','thumb1':'http://localhost:80/mapScripts/thumbnails/lhasa.jpeg','thumb2':'http://localhost:80/mapScripts/thumbnails/Tibet.jpg',})

Then in JavaScript I just:

function makeThumbs(data, layer){
                alert("already Here "+ data);
                var icon = new OpenLayers.Icon(data);
                alert(icon.url);
                layer.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(93.9, 29.53).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),icon));
                for(var m = 0; m < layer.markers.length; m++){
                    layer.markers[m].events.register("click", layer.markers[m], function clickIcon(e){alert("How are you?");});
                    $("[id$=innerImage]").css({"border-style":"solid","border-width":"3px","border-color": "white"});
                }
            }

            $.getJSON('http://localhost:80/mapScripts/getThumbs.php?thumbnails=?', function(data) {makeThumbs(data.thumb2, markers);});

So it seems after the $_GET variable you can put typical JSON data and fetch it as you normally would (notice the data.thumb2 in the JavaScript).