Динамическое содержание страницы AJAX с регионами карты

Question

Я использую 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); 
?> 

Я не получаю никакого ответа от карты. Я очень новичок в AJAX, поэтому я был бы признателен за любую помощь, которую я смогу с этим справиться. Возможно, мне не хватает очень важной части.

Answer 1

Когда вы говорите «нет ответа от карты», вы имеете в виду, что ваш highlightRegionOfCountry и unhighlightRegionOfCountry работают, и это просто, что ваш вызов ajax не работает? И что вы хотите, чтобы значение переменной $ post в вашем php-скрипте оказалось внутри вашего элемента?

Если это так, я думаю, что есть немного путаницы в том, как вы получаете данные в своем jQuery ajax-вызове. Вы не получили бы его, поставив PHP-код в код javascript, вы получите его в данных, переданных вашей функции обратного вызова, в переменной «response», как у вас есть. Кроме того, вы должны передать клик-код в качестве данных в вызове ajax. Кроме того, вы не можете использовать просто свойство «html» для элемента dom, поэтому я это изменил. Таким образом, ваш Ajax вызов должен быть изменен на что-то вроде:

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

Кроме того, это лучше практике цитировать ваши строки в PHP, поэтому вместо того, чтобы, например, случай Китай :, использование случае «Китай»: и так далее.