嘗試使用AJAX將PHP中的json_encode數組轉換為Javascript函數

Question

在我的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解決方案。 謝謝！

Answer 1

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

Answer 2

您必須在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); 兩次。