gpt4 book ai didi

javascript - 带有 map 区域的 AJAX 动态页面内容

转载 作者:行者123 更新时间:2023-12-03 11:56:00 25 4
gpt4 key购买 nike

我正在使用 JQVMaps 在 WordPress 网站上创建世界地图。我需要根据用户单击的区域生成页面内容。这是我迄今为止的概念证明:

    <div id="post"></div>
<script>
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#fff',
borderColor: '#bbb',
borderOpacity: 1,
borderWidth: .2,
color: '#bbb',
onRegionOver : function (element, code, region)
{
highlightRegionOfCountry(code);
},
onRegionOut : function (element, code, region)
{
unhighlightRegionOfCountry(code);
},
onRegionClick: function(element, code, region)
{
highlightRegionOfCountry(code);
$.ajax('/get_chart_data.php', {
dataType: 'json',
success: function(response) {
var jspost = "<?php echo $post; ?>";
var el = document.getElementById("post");
el.html = jspost;
}
});
}
});
</script>

这是我在 get_chart_data.php 中的内容:

<?php

// Switch based on region
switch($_REQUEST['region']) {
case China:
$post = 'You clicked China';
break;
case Canada:
$post = 'You clicked Canada';
break;
case Brazil:
$post = 'You clicked Brazil';
break;
}

echo json_encode($post);
?>

我没有从 map 上得到任何回应。我对 AJAX 非常陌生,因此我将非常感谢我能获得的任何帮助。我可能遗漏了一个非常关键的部分。

最佳答案

当你说“ map 没有响应”时,你的意思是你的highlightRegionOfCountry和unhighlightRegionOfCountry正在工作,而只是你的ajax调用不起作用?您想要的是 php 脚本中的 $post 变量的值最终出现在您的元素中?

如果是这种情况,我认为您在 jQuery ajax 调用中接收数据的方式有点困惑。您不会通过将 php 代码放入 javascript 代码中来接收它,您会在传递给成功回调函数的数据中接收它,在您拥有的变量“response”中。另外,您必须将单击的代码作为 ajax 调用中的数据传递。另外,您不能在 dom 元素上仅使用普通的“html”属性,因此我将更改它。因此,您的 ajax 调用应更改为:

$.ajax({
url: "/get_chart_data.php",
data: {
region: region
},
success: function(response) {
$("#post").html(response);
}
});

此外,在 php 中引用字符串是更好的做法,因此不要使用例如case China:、use case 'China': 等等。

关于javascript - 带有 map 区域的 AJAX 动态页面内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25614882/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com