Fatal编程技术网
  • javascript/
  • Javascript 使用ajax在地图上单击操作加载不同的div

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

javascript jquery ajax html map

Javascript 使用ajax在地图上单击操作加载不同的div,javascript,jquery,ajax,html,map,Javascript,Jquery,Ajax,Html,Map,我在页面中有一个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="d

我在页面中有一个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>

(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="">
我有一张地图如下：

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

(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="">
但我不知道怎么做 你能帮我吗？
谢谢

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

我认为你想要的将需要一个不同于你提议的解决方案

首先，您希望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>
这完全取决于你，而且相当灵活

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

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

我尝试了你的代码，但已经修改了。成功：因为给我一个错误：$.ajax（{url:，dataType:“html”}）。成功（函数（数据）{$（“#数据”）.html（数据）；}）它可以工作，但当我单击区域地图时，它会将我带到page:pagewithdiv，而我希望保留在page:test上，对此表示抱歉。我忘记添加
return false
以取消单击事件。别忘了在MAP onclick处理程序中使用
return loadDiv（event）
。它会继续把我带到page:pagewithdiv你能用JSFIDLE为我创建一个工作演示吗？感谢您必须更改区域标记上的
href
属性，使其指向应包含该链接内容的URL。我正在尝试解决的问题是，我在wordpress网站上工作，没有扩展名为.html的页面 
<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>

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