dongyi2889 2014-09-02 02:06
浏览 76
已采纳

带有地图区域的AJAX动态页面内容

I'm using JQVMaps to create a world map on a WordPress site. I need to generate the page's content based on the region the user clicked. Here is what I have so far for a proof of concept:

    <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>

And here's what I have in 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);
?>

I'm getting no response from the map. I'm very new to AJAX, so I would appreciate any and all help I can get with this. I may be missing a very crucial piece.

  • 写回答

1条回答 默认 最新

  • douyue5856 2014-09-02 03:35
    关注

    When you say "no response from the map," do you mean that your highlightRegionOfCountry and unhighlightRegionOfCountry are working, and it's just that your ajax call is not working? And what you want is for the value of the $post variable in your php script to end up inside your element?

    If that's the case, I think there's a little confusion about how you receive data in your jQuery ajax call. You wouldn't receive it by putting php code inside the javascript code, you would receive it in the data passed to your success callback function, in the variable "response" as you have it. Also, you have to pass the clicked code as data in the ajax call. Also, you can't use just a plain "html" property on a dom element, so I'll change that. So your ajax call should be changed to something like:

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

    Also it's a better practice to quote your strings in php, so instead of e.g. case China:, use case 'China': and so on.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常