使用Ajax/PHP更新Javascript变量
Updating Javascript Variables With Ajax/PHP
我在刷新游戏时遇到了一些问题。起初,我试着每次都重复整个脚本。。。但那并不好看。现在,我尝试使用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,只需:
- 发出AJAX请求,将JS变量加载到脚本中
- 让AJAX请求使用上面的代码加载值
这花了六个小时才弄清楚,但我为自己感到骄傲。
相关文章:
- 将函数的上下文应用于javascript变量
- 如何通过ajax刷新JSF填充的javascript变量
- Javascript变量赋值|
- 限制javascript变量的最小/最大整数
- 来自文本输入null的html javascript变量
- 访问jsrender模板中的全局javascript变量并更新它
- 从数据库中获取数据并插入JavaScript变量
- 如何将javascript变量传递到Meteor Spacebars模板中
- 将JavaScript变量保存到Rails模型
- 在if语句下的html中使用javascript变量
- Javascript变量分配-按类别
- 操作javascript变量[HTML]以只显示文本
- 无法比较javascript变量
- 如何将smarty变量与javascript变量进行比较
- 如何使用PHP将javascript变量添加到mysql数据库中
- Javascript 变量使用 jquery 查找变量
- 重新加载页面时Javascript变量发生变化
- 在asp classic中使用javascript变量
- 全局Javascript变量变为null
- 如何向服务器端提交javascript变量