使用 JSONP 将数组从 PHP 返回到 JavaScript

Question

我正在尝试使用 JSONP 将数组从 PHP 返回到 JavaScript。希望我的代码能够准确地演示我想要做什么，因为我什至不太确定如何表达它...

我的 PHP 文件，端口 80，因此需要使用 JSONP 而不是 JSON（我已经尝试过） 我也不确定我是否正确地形成了 $_GET 变量，但我很确定这是错误的，而且我缺乏知识是造成这种情况的原因......

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

?>

然后在端口 8080 上的 JavaScript 中（跨域，是的，它有效很好，直到我尝试使用这个数组而不是只传递一个图像 url）我想从 PHP 数组中获取每个图像 url，以便我可以使用该图像制作图标..

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);});

再次将我传递给 $.getJSON 的 url方法也可能是错误的。我需要知道如何从传递的数组中选择确切的照片 url，而不是所有 JSONP 数据。

感谢您的宝贵时间和反馈帮助我解决此问题。

埃尔谢

Answer 1

我实际上找到了一种方法..这里是..

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

?>

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

然后在 JavaScript 中我只是：

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);});

所以看起来在 $_GET 变量之后你可以放置典型的 JSON 数据并像平常一样获取它（注意JavaScript 中的 data.thumb2）。