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

回答

相關問題