使用 JQuery .load 从另一个页面加载 div答案

【问题标题】：Using JQuery .load to load div from another page使用 JQuery .load 从另一个页面加载 div
【发布时间】：2015-03-16 02:16:46
【问题描述】：

我正在尝试学习 JQuery，但在完成一项简单的任务时遇到了麻烦。我有一个页面（目录：root/admin/indexContent.html），我想从另一个页面（目录：root/index.html）加载带有 ID #header1 的 h2 标记的内容。

这里是 indexContent.html 头部的脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
     $("#indexHeader1").load("../index.html #header1");
});
</script>

我要从 index.html 加载的 h2 标签：

<h2 id="header1">Home</h2>

我希望在 admin/indexContent.html 上加载 h2 标记：

<div id="indexHeader1"></div>

据我了解，$("#indexHeader1") 是加载内容的选择器，.load() 中的参数是我要加载的文件的路径，但这个脚本什么也不做。有人知道为什么吗？

编辑：在我的代码中添加 console.log($("#indexHeader1").length) 并阅读我的控制台后，我得到了：

1                                                    indexContent.html:10
GET http://highstreetdeliwb.com/admin/images/navigation/logoClear.png 404 (Not Found)                                              logoclear.png:1

还有几行GET http://site/admin/images/whatever.png。我不明白它为什么要获取这些图像，我只想要一个 H2 元素。另外值得注意的是，这些图像的路径错误。

http://highstreetdeliwb.com/admin/images/navigation/logoClear.png

应该是：

http://highstreetdeliwb.com/images/navigation/logoClear.png

【问题讨论】：

你做了什么来调试这个？你看过浏览器的JS控件有没有错误？您是否查看过“网络”选项卡以查看请求是否正确发送并获得正确的响应？是否添加了一些console.log 语句来查看代码是否正在执行？您是否检查过您正在寻找的元素是否被找到（例如console.log($("#indexHeader1").length)？
代码没有问题。确保您正在从服务器运行页面（例如：apache。）。直接打开 html 文件在某些浏览器（如 firefox）中不起作用
我刚刚更新了我的帖子，提供了更多信息。看来我的路径是错误的
为了测试，尝试用 index.html 的完全限定路径替换“../index.html #header1”。似乎“admin”是根据您的 ajax 代码运行的位置而不是 index.html 所在的位置添加的。
@AllenKing ，我只是尝试过，但无济于事。控制台显示它仍在 admin/images 中搜索文件

标签： jquery html

【解决方案1】：

您的代码似乎是正确的，但您是否尝试过使用 ajax() 函数从另一个页面获取内容？由于您必须获取标签，因此您可以轻松附加它。

$.ajax({
url: '../index.html',
dataType: 'html',
success: function(html) {
    var div = $('#header1', $(html)).addClass('done');
        $('#indexHeader1').html(div);
    } 
});

试一试。

编辑我已经用你的 id 和我在评论中提到你的链接修改了代码。

【讨论】：

这实际上让我的页面加载了一些东西！不幸的是，它会加载整个页面（文本内容、损坏的图像）。知道为什么它返回整个 index.html 而不仅仅是 ID 为 header1 的 H2 元素吗？
也许正确答案在这个链接上：stackoverflow.com/questions/5611746/…。我将为您更新代码。
是的！这行得通！有趣的是，我的控制台仍在显示这些图像错误，但我想这并不重要，因为我不会弄乱这些图像。非常感谢！
很高兴听到这个朋友的消息！祝你代码的其余部分好运！