使用 AJAX/jQuery 弹出页面

Question

我正在开发一张简单的地图来显示我所在地区的营业地点。我有一个包含地图的主页（map.php），我还创建了一个页面（business.php），它显示有关特定业务的更多信息，例如一些图像、评论等。

我需要在信息框 (infowindow) 上有一个链接，该链接将使用 AJAX/jQuery 动态链接到此页面。我还希望能够将所选业务的值（单击的图标）从 map.php 传递到 business.php，以便我可以显示和/或操作它们。我可以通过将 url 上的值传递给 php 页面来轻松做到这一点。但是我不想离开主页，我只想弹出业务页面。我该怎么做？下面是我的 JavaScript 代码：

function getLocations (url) {
    downloadUrl(url, function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var pic = markers[i].getAttribute("image");
            var link = markers[i].getAttribute("link");
            var details = markers[i].getAttribute("details");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<div id='content'>" + name + "</b> <br />" + '<img src="' + pic + '"/>' + "  </b> <br/>" + address + '</b> <br /> <a href="business.php">View More Information</a></div>';
            var icon = customIcons[type] || {};
            var marker = new MarkerWithLabel({
                position: point,
                draggable: false,
                raiseOnDrag: false,
                map: map,
                labelContent: type,
                labelAnchor: new google.maps.Point(30, 65),
                labelClass: "labels", // the CSS class for the label
            });
            bindInfoWindow(marker, map, infoWindow, html);
        }
    });
}

当用户单击“查看更多信息”链接时，我希望 business.php 页面动态弹出。

Answer 1

正确答案是：视情况而定。你想如何显示这些信息？您要打开一个新窗口还是根本不打开？

1. 如果您想/需要/喜欢打开一个新窗口，只需使用<a> 标记的target 属性即可。像这样：<a href="business.php" target="business">View More Information</a>。 target 是您要打开的窗口的名称（如here）。如果您愿意（位置、大小等），您甚至可以使用 javascript 操作该窗口。从技术上讲，这是一个弹出窗口，因此您客户端的某些浏览器配置可能不这样。

2. 另一方面，如果您希望在同一页面上显示 business.php，请使用带有嵌入式 iframe 的类似 fancybox 或 lightbox 的解决方案，这样您可以背景中的原始页面（变暗且无法访问）并且仍然可以看到您的业务页面。您甚至可以通过创建页面来摆脱 iframe，以便使用 ajax 加载 business.php 页面并替换某些 div/whatever 的内容以包含该新 html。

3. 您还可以创建动态 iframe 来呈现 business.php 页面等。

有很多选项，您应该根据您的要求和每种解决方案对您的问题的适用性（例如，如果用户阻止打开新窗口会发生什么情况）仔细检查使用哪一个。

Answer 2

您需要“hijax”这些链接。我能想到的最简单的方法是这样的：

// When clicking any link
$('a').live('click', function (e) {
    var clicked = $(this);

    // Make sure a bussiness.php-link was clicked
    if (clicked.attr('href').indexOf('business.php') != -1) {
        // Grab the page with ajax
        $.get(clicked.attr('href'), function (data) {
            alert(data);
        });

        return false;
    }
});

编辑：您很可能希望将 alert() 更改为灯箱或更高级的东西。