Question

由于我的网站只有一个页面，index.html变得非常长，无法阅读。所以我决定将每个部分放在一个不同的HTML文件中并使用jQuery来包含它。

我使用了jQuery的include，因为它已被提及here包含一个外部HTML文件，但显然它不适用于我的网站。我真的不知道是什么问题。

Here是我工作区的链接。

以下是我在index.html文件中要执行的操作，以包含其他部分

<script src="./js/jquery-1.11.1.min"></script>
<script>
    $(function() {
        $("#includedContent").load("./page1.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page2.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page3.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page4.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page5.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page6.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page7.html");
    });
</script>

我还使用了this方法来确保文件可以访问，一切都很好。所以问题不在于文件的可访问性

Answer 1

您正在覆盖#includedContent七次的内容（请参阅jQuery.load的文档）。使用AJAX，无法保证首先完成哪个请求，因此您最终会在容器内部随机页面内容。

解决方案是为每个页面创建容器，并将每个页面加载到其专用容器中，如下所示：

<div id="includedContent">
    <div class="page1"></div>
    <div class="page2"></div>
    <div class="page3"></div>
</div>

$(document).ready(function() {
    $("#includedContent .page1").load("page1.html");
    $("#includedContent .page2").load("page2.html");
    $("#includedContent .page3").load("page3.html");
});

注意：说了这么多，我不明白AJAX如何解决页面太长/不可读的问题。

Answer 2

有几件事对我来说很奇怪：

所有加载函数都在文档就绪时运行，这在拥有所有相同目标时很奇怪。 load 替换（不添加）所选元素的内容与正在加载的内容，您可能正在尝试添加所有html内容，但您当前的设置实际上只会加载{{ 1}}进入page7.html
路径对我来说很奇怪，我猜#includedContent可能会导致错误，试图在任何地方遗漏./。
而不是加载整个html页面，你可能只想加载一个文件（我不知道./看起来如何），例如你不想加载{{1完全是节点，而只是内容：pageX.html
你正确地包括jquery吗？您的收录中没有<html>

jQuery的include方法不起作用

2 个答案: