使用JQuery .load从另一页加载div

我正在尝试学习JQuery，并且遇到了一个简单的任务。我有一个页面（dir：root/admin/indexContent.html），我想从另一个页面（dir：root/index.html）加载带有ID＃header1的h2标签的内容。使用JQuery .load从另一页加载div

这里是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>

的H2标签我想从index.html的加载头的脚本：

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

我想要的H2标签上加载管理员/ indexContent.html：

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

从我的理解$（ “＃indexHeader1”）是在哪里LOA选择d内容，并且.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

来源

2015-03-13 Russell Anthony Carpenella

你做了什么来调试呢？你看过你的浏览器的JS控件，看看是否有任何错误？你有没有看过Net标签，看看请求是否正确发送并得到正确的响应？你是否添加了一些'console.log'语句来查看代码是否正在执行？你是否检查过你正在寻找的元素（例如''console.log（$（“＃indexHeader1”）。）？？ – Quentin 2015-03-13 18:57:25

代码没有问题..确保你正在运行页面一个服务器（例如：apache。）。直接打开html文件不会在某些浏览器（如Firefox）中工作 – 2015-03-13 19:04:47

我刚刚更新了我的帖子，提供了更多信息，看起来像我的路径错误 – 2015-03-13 19:17:49

您的代码似乎是正确的，但如果你试图使用AJAX（）函数来获取从另一个网页的内容？既然你必须得到一个标签，你可以很容易地追加它。

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

试试看。

编辑我修改了代码和你的ID以及我在评论中提到你的链接。

来源

2015-03-13 19:23:27

这实际上使得我的页面加载了一些东西，不幸的是它加载了整个页面（文本内容，破碎的图像）。他是整个index.html而不仅仅是具有ID header1的H2元素？ – 2015-03-13 19:33:13

也许正确的答案是在这个链接：http://stackoverflow.com/questions/5611746/jquery-ajax-load-certain-div。我将为您更新代码。 – 2015-03-13 21:16:56

是的！这工作！有趣的是，我的控制台仍然显示这些图像错误，但我想这不重要，因为我不会搞乱那些图像。万分感谢！ – 2015-03-13 22:57:45

使用JQuery .load从另一页加载div

回答

相关问题