使用Ajax/PHP更新Javascript變量

我一直在用刷新我的遊戲時遇到一些問題。起初，我試着每次迴應整個劇本......但那並不美妙。現在我試圖簡單地用Ajax請求更新變量。我對Ajax代碼：使用Ajax/PHP更新Javascript變量

<script> 
$(document).ready(function(){ 
    refreshMap(); 
}); 

function refreshMap(){ 
    $('#mapVars').load('<?php print"$game_link_play" ?>/ajax/getPrepareMap.php?id=<?php print"$game_id";?>', function(){ 
     setTimeout(refreshMap, 5000); 
    }); 
} 
</script>

getPrepareMap.php：

<?php 
echo" 
    <script> 
     var nationColors = { 
       'DE': '#990000', 
       'GB': '#009999', 
       'FR': '#009999', 
      }; 

      var nationLeaders = { 
       'DE': 'Adolf Hitler', 
       'GB': 'Winston Churchill', 
       'FR': 'Winston Churchill', 
      }; 

      var nationPopulation = { 
       'DE': '81,000,000', 
       'GB': '54,000,000', 
       'FR': '64,000,000', 
      } 

    </script> 
"; 
?>

用於加載地圖的腳本：

<script> 
$(function(){ 

    function chkLeader(val){ 
     if (typeof val ==="undefined"){ 
      x = "No Leader"; 
     } 
     else { 
      x = val; 
     } 
     return x; 
    }; 

    markers = [ 
    {latLng: [52.50, 13.39], name: 'Berlin'}, 
    {latLng: [51.5, 0.13], name: 'London'}, 
    {latLng: [48.85, 2], name: 'Paris'} 
    ], 

    cityData = [ 
    100, 
    100, 
    100 
    ] 


    map = new jvm.WorldMap({ 

    container: $('#map'), 
    map: 'europe_mill_en', 
    backgroundColor: '#1C6BA0', 
    zoomOnScroll: false, 
    markers: markers, 

    regionStyle: { 
     initial: { 
      fill: '#78B6A4', 
     } 
    }, 

    markerStyle: { 
     initial: { 
      fill: 'yellow' 
     } 
    }, 
    series: { 
     regions: [{ 
      attribute: 'fill' 
     }], 

     markers: [{ 
      attribute: 'r', 
      scale: [5, 6], 
      values: cityData 
     }] 
    }, 

    onRegionLabelShow: function(event, label, code){ 
     label.html(
      '<strong>' + 
       label.html() + 
      '</strong>' + '<br>' + 

      '<strong>' + 
       'Leader: ' + 
      '</strong>' + 

      chkLeader(nationLeaders[code]) + '<br>' + 

      '<strong>' + 
       'Population: ' + 
      '</strong>' + 

      nationPopulation[code] 

      ); 
     } 

    }); 

    map.series.regions[0].setValues(nationColors); 
});

編輯：我可以得到新的變量引入頁面，但地圖不會刷新？

新代碼對於Ajax：

$(document).ready(function(){ 
    refreshMap(); 
}); 

function refreshMap(){ 
    $('#mapVars').load('<?php print"$game_link_play" ?>/ajax/getPrepareMap.php?id=<?php print"$game_id";?>', function(){ 
     setTimeout(refreshMap, 5000); 
    }); 

    mapReload(); 
}

新代碼地圖加載腳本：

$(function mapReload(){ 
    function chkLeader(val){ 
     if (typeof val ==="undefined"){ 
      x = "No Leader"; 
     } 
     else { 
      x = val; 
     } 
     return x; 
    }; 

    markers = [ 
    {latLng: [52.50, 13.39], name: 'Berlin'}, 
    {latLng: [51.5, 0.13], name: 'London'}, 
    {latLng: [48.85, 2], name: 'Paris'} 
    ], 

    cityData = [ 
    100, 
    100, 
    100 
    ] 


    map = new jvm.WorldMap({ 

    container: $('#map'), 
    map: 'europe_mill_en', 
    backgroundColor: '#1C6BA0', 
    zoomOnScroll: false, 
    markers: markers, 

    regionStyle: { 
     initial: { 
      fill: '#78B6A4', 
     } 
    }, 

    markerStyle: { 
     initial: { 
      fill: 'yellow' 
     } 
    }, 
    series: { 
     regions: [{ 
      attribute: 'fill' 
     }], 

     markers: [{ 
      attribute: 'r', 
      scale: [5, 6], 
      values: cityData 
     }] 
    }, 

    onRegionLabelShow: function(event, label, code){ 
     label.html(
      '<strong>' + 
       label.html() + 
      '</strong>' + '<br>' + 

      '<strong>' + 
       'Leader: ' + 
      '</strong>' + 

      chkLeader(nationLeaders[code]) + '<br>' + 

      '<strong>' + 
       'Population: ' + 
      '</strong>' + 

      nationPopulation[code] 

      ); 
     } 

    }); 

    map.series.regions[0].setValues(nationColors); 
});

但由於某些原因的頁面變成空白:(需要

來源

2014-10-11 user3798996

在AJAX調用返回後，你對變量做什麼？ – Barmar 2014-10-11 02:27:35

基本上，我正在加載一張地圖。我想要AJAX調用爲地圖獲取新的變量值並更新它們。我試圖把所有的Javascript放入AJAX請求中，並且它有點奏效。但問題是，如果您在另一次AJAX更新之後關閉鼠標，懸停時顯示的DIVS仍會顯示。 – user3798996 2014-10-11 02:31:25

你只是更新變量。您需要調用適當的地圖方法，使其使用新變量更新地圖。 – Barmar 2014-10-11 02:33:52

mapReload在被稱爲回調：

$(function() { 

    refreshMap(); 

    function mapReload() { 
     ... 
    } 

    function refreshMap(){ 
     $('#mapVars').load('<?php print"$game_link_play" ?>/ajax/getPrepareMap.php?id=<?php print"$game_id";?>', function(){ 
      mapReload(); 
      setTimeout(refreshMap, 5000); 
     }); 
    } 

});

您使用指定的函數表達式定義了mapReload，並且在該語法中，其名稱僅在函數體中可見。

來源

2014-10-11 02:50:17 Barmar

應該mapReload（）;函數在Ajax代碼之上？它仍然是未定義的。 – user3798996 2014-10-11 02:53:22

看到我上面的評論。你需要讓他們在同一個範圍內。 – Barmar 2014-10-11 02:54:55

好的，我把AJAX放在下面。它不再是未定義的，但它仍然不會更新到新的變量。：/ – user3798996 2014-10-11 02:55:47

好吧，它看起來像我全力以赴。 :)

基本上，我不得不把

map.series.regions[0].setValues(nationColors, nationLeaders, nationPopulation);

在AJAX回調。

要使用Ajax更新JVectorMap，簡單地說：

做一個AJAX請求加載JS變量到腳本。
讓AJAX請求使用上面的代碼加載值。

這花了六個小時才弄清楚，但我爲自己感到驕傲。

來源

2014-10-11 15:46:00 user3798996

使用Ajax/PHP更新Javascript變量

回答

相關問題