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="">

当我点击区域形状（区域1）时，我会在同一测试页面中加载div“list1”内容并将其显示在地图下当我点击区域形状（区域2）时，我会在相同的测试页面加载div“list2”（替换list1）内容并在地图下显示我不想通过在同一页面测试中加载所有div来使用show hide功能，因为页面会变得很重。

我想使用ajax函数，以便

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

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

Answer 1

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

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

Answer 2

我认为你想要的东西需要一个与你提出的不同的解决方案。

首先，您需要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＃数据元素中的HTML片段。

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

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

这完全取决于你并且非常灵活。

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

编辑：修复了语法错误

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

2 个答案: