0

在我的 PHP 文件中，我创建了一个数组数组，并使用 json_encode 使这个数组在 javascript 中可用。当我在标签中呼应这个方向时，它可以完美地工作。但是，我需要定期运行 PHP（我正在使用 setTimeout），所以我尝试使用 AJAX 调用 php 并让该数组在 javascript 函数中使用。

这是PHP：

$bubbles = array();
$result = mysql_query("SELECT text, lat, lng FROM bubbles");
while($row = mysql_fetch_array($result)){
$newbubble = array($row[0],$row[1],$row[2],'female-2.png');
$bubbles[] = $newbubble;
}
$js_array =  json_encode($bubbles);
echo"$js_array";

这是有问题的 javascript/AJAX 部分：

setTimeout(initializeMaps, 5000);

function initializeMaps() {
var markers;
var ajax;
ajax=new XMLHttpRequest();
ajax.onreadystatechange=function()
  {
  if (ajax.readyState==4 && ajax.status==200)
    {
var markers = ajax.responseText;
    }
  }
ajax.open("GET","ajax-getbubbles.php",true);
ajax.send();


/*The markers variable needs to be used in the following code*/
var iconBase = 'http://picaflora.com/uniproject/images/';
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: iconBase + markers[i][3]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
setTimeout(initializeMaps, 5000);
}

如果我使用 alert() 或 console.log()，所有数据都可以从 PHP 中返回。但不知何故，脚本的其余部分似乎没有对变量标记做任何事情。我对javascript不太熟悉，只是熟悉到可以修补和尝试直到它起作用，所以如果你认为可能有更好的方法来解决这个问题，那么一定要去做。在这一点上，我宁愿不研究 jQuery 解决方案，除非有必要。谢谢！

4

2 回答 2

0

与 PHP 不同，Javascript 是异步的。在您收到响应之前，您使用标记执行操作的所有 javascript 代码都会立即执行。您需要做的是将它包装在一个函数中：

function myFunc(markers) {
     // all of your code to do stuff
}

然后在响应状态发生变化时调用该函数：

ajax.onreadystatechange=function()
{
  if (ajax.readyState==4 && ajax.status==200)
  {
      var markers = ajax.responseText;
      myFunc(markers);
  }
}
于 2013-07-04T21:31:26.663 回答
0

您必须在 javascript 的末尾解码编码的 JSON 字符串，然后才能将其用作变量。

代替

var markers = ajax.responseText;

利用

var markers = JSON.parse(markers);

尝试这个-

setTimeout(initializeMaps, 5000);

function initializeMaps() {
    var markers;
    var ajax;
    ajax=new XMLHttpRequest();
    ajax.onreadystatechange=function(){
        if (ajax.readyState==4 && ajax.status==200){
            var markers = JSON.parse(ajax.responseText);
            update(markers);
        }
    }
    ajax.open("GET","ajax-getbubbles.php",true); 
    ajax.send();
}

function update(markers){
    var iconBase = 'http://picaflora.com/uniproject/images/';
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map,
            icon: iconBase + markers[i][3]
        });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(markers[i][0]);
        infowindow.open(map, marker);
    }
    })(marker, i));
   }    
}

PS-我不确定为什么要打setTimeout(initializeMaps, 5000);两次电话。

于 2013-07-04T21:32:09.750 回答