Updating Javascript Variables With Ajax/PHP

I've been having some issues with refreshing my game. At first, I tried echoing the entire script each time... But that wasn't pretty. Now I'm trying to simply update the variables with an Ajax request. My code for Ajax:

我在刷新游戏方面遇到了一些问题。起初,我每次尝试回显整个脚本......但那并不漂亮。现在我试图用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>
";
?>

The script for loading the map:

加载地图的脚本:

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

Edit: I can get the new variables into the page, BUT the map won't refresh?

编辑:我可以将新变量放入页面,但地图不会刷新?

New Code For Ajax:

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

New Code for Map Load Script:

地图加载脚本的新代码:

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

But for some reason the page goes blank :(

但由于某种原因,页面变成空白:(

2 个解决方案

#1

mapReload needs to be called in the callback:

需要在回调中调用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);
        });
    }

});

You defined mapReload using a named function expression, and in that syntax its name is only visible within the function body.

您使用命名函数表达式定义了mapReload,并且在该语法中,其名称仅在函数体中可见。

#2

Alright, it looks like I figured it all out. :)

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

Basically, I just had to put

基本上,我只是放了

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

in the AJAX callback.

在AJAX回调中。

To update JVectorMap with Ajax, simply:

要使用Ajax更新JVectorMap,只需:

Make an AJAX request that loads JS variables into a script.

创建一个将JS变量加载到脚本中的AJAX请求。

Have the AJAX request load the values using the above code.

让AJAX请求使用上面的代码加载值。

This took six hours to figure out, but I am proud of myself.

花了六个小时才弄明白,但我为自己感到骄傲。

#1