使用Ajax/PHP更新Javascript变量

Updating Javascript Variables With Ajax/PHP

本文关键字:Javascript 变量 更新 PHP Ajax 使用      更新时间:2023-09-26

我在刷新游戏时遇到了一些问题。起初,我试着每次都重复整个脚本。。。但那并不好看。现在,我尝试使用Ajax请求简单地更新变量。我的Ajax代码:

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

但由于某些原因,页面变为空白:(

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,在该语法中,其名称仅在函数体中可见。

好吧,看起来我想明白了。:)

基本上,我只需要放

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

在AJAX回调中。

要使用Ajax更新JVectorMap,只需:

  1. 发出AJAX请求,将JS变量加载到脚本中
  2. 让AJAX请求使用上面的代码加载值

这花了六个小时才弄清楚,但我为自己感到骄傲。