带有地图区域的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.

查看全部
dongyi2889
dongyi2889
2014/09/02 02:06
  • php
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

1个回复