使用ajax在地图上的点击操作上加载不同的div

Question

我在页面中有一个 div 序列：

http://foo.com/pagewithdiv

如下：

<div id="list1" class="alist" style="display:none;">content1</div>
 <div id="list2" class="alist" style="display:none;">content2</div>
 <div id="list3" class="alist" style="display:none;">content3</div>
 <div id="list4" class="alist" style="display:none;">content4</div>
 <div id="list5" class="alist" style="display:none;">content5</div>
 <div id="list6" class="alist" style="display:none;">content6</div>
 <div id="list7" class="alist" style="display:none;">content7</div>
 <div id="list8" class="alist" style="display:none;">content8</div>
 <div id="list9" class="alist" style="display:none;">content9</div>
 <div id="list10" class="alist" style="display:none;">content10</div>

在其他页面中：

http://foo.com/test

我有一张地图如下：

(area1)    <area shape="circle" coords="309,187,20" href="#" onclick="">
(area2)    <area shape="circle" coords="310,123,20" href="#" onclick="">
(area3)    <area shape="circle" coords="260,187,20" href="#" onclick="">
(area4)    <area shape="circle" coords="260,123,20" href="#" onclick="">
(area5)    <area shape="circle" coords="210,187,20" href="#" onclick="">
(area6)    <area shape="circle" coords="210,123,20" href="#" onclick="">
(area7)    <area shape="circle" coords="160,187,20" href="#" onclick="">
(area8)    <area shape="circle" coords="159,123,20" href="#" onclick="">
(area9)    <area shape="circle" coords="111,187,20" href="#" onclick="">
(area10)   <area shape="circle" coords="111,123,20" href="#" onclick="">

当我单击区域形状​​ (area1) 时，我会在同一测试页面中加载 div“list1”内容并将其显示在地图下 当我单击区域形状​​（area2）时，我将在同一测试页面中加载 div“list2”（替换 list1）内容并将其显示在地图下 我不想通过在同一页面测试中加载所有 div 来使用显示隐藏功能，因为页面会变得很重。

我想使用一个ajax函数

$.ajax({
    url: "http://foo.com/pagewithdiv
",
    dataType: "json"
}).success(function(data){
    $('#data').append(JSON.stringify(data));
});

但我不知道该怎么做 你可以帮帮我吗？ 谢谢

Answer 1

我认为您想要的解决方案与您提出的解决方案不同。

首先，您需要 Ajax 调用访问一个 URL，该 URL 根据 URL 参数返回动态响应。然后是一些 HTML 和 JavaScript：

<map onclick="return loadDiv(event)">
    <area shape="circle" coords="309,187,20" href="http://foo.com/pagewithdiv?id=list1">
    <area shape="circle" coords="310,123,20" href="http://foo.com/pagewithdiv?id=list2">
    <area shape="circle" coords="260,187,20" href="http://foo.com/pagewithdiv?id=list3">
    <area shape="circle" coords="260,123,20" href="http://foo.com/pagewithdiv?id=list4">
    <area shape="circle" coords="210,187,20" href="http://foo.com/pagewithdiv?id=list5">
    <area shape="circle" coords="210,123,20" href="http://foo.com/pagewithdiv?id=list6">
    <area shape="circle" coords="160,187,20" href="http://foo.com/pagewithdiv?id=list7">
    <area shape="circle" coords="159,123,20" href="http://foo.com/pagewithdiv?id=list8">
    <area shape="circle" coords="111,187,20" href="http://foo.com/pagewithdiv?id=list9">
    <area shape="circle" coords="111,123,20" href="http://foo.com/pagewithdiv?id=list10">
</map>

<div id="data"></div>

<script>
    function loadDiv(event) {
        // Make event cross browser
        event = event || window.event;
        event.target = event.target || event.srcElement;
        event.preventDefault = event.preventDefault || function() {
            this.returnValue = false;
        };

        var url = event.target.href;

        if (!url) {
            return true;
        }

        event.preventDefault();

        console.log("Make Ajax request to " + url);

        // Make sure <AREA> href values are in the same domain as the page running this JavaScript.
        // AJAX currently fails in JSFiddle due to the same domain policy in browsers.
        $.ajax({
            url: url,
            dataType: "html",
            method: "GET"
        }).success(function(data) {
            $("#data").html(data);
        })
        .fail(function(xhr, status, error) {
            $("#data").html("Ajax request failed to " + url +
                            "<br>Status: " + xhr.status + " (" + status + "), Error: " + error);
        });
    }
</script>

对 /pagewithdiv?id=N 的 AJAX 调用应返回您要放入 DIV#data 元素的 HTML 的 sn-p。

编辑：由于 AJAX URL 取自 AREA 标签的href，因此您也可以在服务器上使用静态文件。只需将每个区域的内容放在其自己的 TXT 或 HTML 文件中即可：

<area ... href="/pages/a.html">
<area ... href="/pages/b.html">

这完全取决于您，而且非常灵活。

我刚刚更改了loadDiv 代码，使其更加灵活。只要作为href 属性被点击的元素，它应该可以工作。

编辑：修正了一个语法错误

Answer 2

请参阅 jQuery 的load 的加载页面片段部分。

$("area#area1").on("click", function() {
  $("div#data").load("/pagewithdiv #list1");
});