使用 jquery/ajax/javascript 加载页面的一部分答案

【问题标题】：load part of a page with jquery/ajax/javascript使用 jquery/ajax/javascript 加载页面的一部分
【发布时间】：2018-06-28 08:01:46
【问题描述】：

我有一系列链接，它们会将另一个页面的一部分加载到我的主页容器 #pageCont 中。我正在使用下面的脚本，它运行良好，但仅在第一个链接上，第二个和第三个链接只是将我重定向到实际页面。我是 jquery 和 ajax 的新手，所以我不知道如何继续使用此代码。

$("#embed-uri").on("click", (function(e){
    $.ajax({
        url:$(this).attr("href"),
        success: function(response) {
            $("#pageCont").html($(response).find("#target"));
        }
    });
    e.preventDefault();
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"pageCont" class="main">
</div>
<div class="sidebar">
<li><a id="embed-uri" href="/webpage1/"</a></li>
<li><a id="embed-uri" href="/webpage2/"</a></li>
<li><a id="embed-uri" href="/webpage3/"</a></li>
</div>

【问题讨论】：

在单个文档中有重复的 ID 是无效的 HTML。考虑解决这个问题。 lis 也不应该是 divs 的子代
<a id="embed-uri" href="/webpage1/"</a> 应该是<a id="embed-uri" href="/webpage1/">item text</a>

标签： javascript jquery ajax

【解决方案1】：

请使用类而不是像这样的相同 id

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"pageCont" class="main">
</div>
<div class="sidebar">
<div><a class="embed-uri" href="/webpage1/"</a></div>
<div><a class="embed-uri" href="/webpage2/"</a></div>
<div><a class="embed-uri" href="/webpage3/"</a></div>
</div>

$(".embed-uri").on("click", (function(e){
$.ajax({
url:$(this).attr("href"),
success: function(response) {
$("#pageCont").html($(response).find("#target"));
}
});

e.preventDefault();
}));

【讨论】：

【解决方案2】：

使用 class 作为“a”标签而不是 id，然后将“#”选择器更改为“.”。它应该像魅力一样工作

【讨论】：

【解决方案3】：

您的选择器有问题）将 id 替换为 class。像那样）

$(".embed-uri").on("click", (function(e){
$.ajax({
url:$(this).attr("href"),
success: function(response) {
$("#pageCont").html($(response).find("#target"));
}
});

e.preventDefault();
}));





<!-- begin snippet: js hide: false console: true babel: false -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"pageCont" class="main">
</div>
<div class="sidebar">
<li><a class="embed-uri" href="/webpage1/"</a></li>
<li><a class="embed-uri" href="/webpage2/"</a></li>
<li><a class="embed-uri" href="/webpage3/"</a></li>
</div>

【讨论】：