使用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变量

回答

相关问题