php - 通过AJAX接收和显示html数据

Question

** 更新 **

我的 AJAX 正在工作(见下文)，但现在模态叠加层在打开后不会关闭。有什么想法吗？ (有关覆盖 JS，请参阅原始帖子中的 jsfiddle)

  map.addMarker({
  lat: 34.5333,
  lng: 69.1333,
  title: 'Afghanistan',
  click: function(){
    if ($('#modal-shade').length == 0)
    var a = $(this).attr('title');
    var jqhxr = $.ajax( 'inc/parser.php?country='+a )
        .done(function(data) {  
            $('.modal').html(data);
            openOverlay('.modal');
            return false;
         });
      }
  });

** 原帖 **

我正在使用 gmaps.js ( http://hpneo.github.io/gmaps/ ) 来显示带有不同国家/地区的多个标记的 map 。我正在尝试对其进行设置，以便当用户单击特定标记时，它会启动 PHP 脚本(即 script.php?country=USA)，查询数据库以填充特定于国家/地区的 html block 数据，并返回该国家/地区数据以模式显示 ( http://jsfiddle.net/istvanv/uQj7t/28/ )，全部通过 AJAX 完成。

我根本不是一个 javascript 人，而且我不知道如何动态地使其工作，而不需要在页面上单独提供每个模式的代码，从而使页面大小变得巨大。这就是我正在做的事情:

map.addmarker({
    lat: 0.0000,
    lng: 0.0000,
    title: USA,
    click: function(e){
    $.ajax({
        url: 'inc/parser.php?country=USA',
        type: 'GET',
        data: 'USA',
        });
    openOverlay('.USA').html(data);
    preventDefault();
    }
});

// more map markers here

parser.php 只是一个 php/mysql 查询，根据传递的变量抓取国家/地区数据并填写模板 - 当我使用国家/地区变量点击页面时，这部分工作正常:

if(isset($_GET['country']) && !empty($_GET['country'])) {
    $country = $_GET['country'];

//connection stuff here

$results = $mysqli->query("SELECT * FROM table WHERE country = '". $country ."' LIMIT 1");

while($row = $results->fetch_object()) {
    echo 'Population: '. $row->population .' people
          etc
          etc
          etc';
    }
}
$mysqli->close();

我知道这可能是可怕和可笑的，但我一直在努力解决它，现在这完全是一场恶作剧。有人可以帮助我使用 AJAX 吗？

Answer 1

你能把添加标记的ajax请求分开吗？当您单击标记时，获取其标题属性并将其传递给您的 ajax url。

否定。

map.addmarker({
    lat: 0.0000,
    lng: 0.0000,
    title: USA,

});// for each marker

$(".YourMarkersClass")click( function(){
        var a= $(this).attr("title");
        $.ajax({
            url: 'inc/parser.php?country='+a,
            type: 'GET',
            data: a,
            });
        openOverlay('.'+a).html(data);
        preventDefault();
        });