如何使用Ajax到新的頁面加載到DIV

我的網站包含兩個頁面。我試圖將第2頁加載到第1頁的div中，然後顯示第2頁onclick。我試圖使用下面的代碼不工作。我是新手，所以我很抱歉，如果這只是愚蠢的問題。如何使用Ajax到新的頁面加載到DIV

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $.ajax({url:"myPage2.html",success:function(result){ 
     $("#div1").html(result); 
    }}); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> 
<button>Get External Content</button> 

</body> 
</html>

來源

2014-01-07 hypermiler

是您的第二個頁面的URL真的'＃myPage2.html' – tymeJV

這顯然不能，因爲''＃用於網頁的URL從錨定在頁面上分開滾動到。 – Barmar

嘗試jsFiddler.net當你有這樣的問題時，你可以加載它併發佈一個鏈接。這樣人們可以編輯它並使用它。 – Ljubisa

你的問題不是你的代碼。正如你可以在this Plnkr中看到的，它運行沒有任何問題。

的.load()功能，可以簡化您當前的代碼，但它不會解決你的實際問題，因爲它只是語法糖。

出於某種原因，您的瀏覽器無法找到myPage2.html，因此無法正確顯示。

來源

2014-01-07 22:17:10 Aidiakapi

太棒了。我試圖弄清楚如何使用Plunker。你先到那裏。嗯。我正在弄清楚爲什麼我找不到myPage2。謝謝！ – hypermiler

嘗試使用瀏覽器的控制檯窗口，它會告訴你它是否在某處出錯:)。 – Aidiakapi

您在加載網址中有一個#符號。

而且，你爲什麼不使用：一旦#從URL刪除

$("#div1").load("myPage2.html");

來源

2014-01-07 21:56:25 Qiang

我認爲這是真的便宜，編輯你的答案包含別人的解決方案。 – Aidiakapi

我實際上沒有看到其他答案，直到我完成編輯 – Qiang

是的。我原本沒有那個「＃」，它什麼都沒做。當我插入「＃」時，它刪除了Page1但未顯示page2。我讀過你不能使用ajax從外部域加載。不知道如何進入第2頁網址..... – hypermiler

您的代碼應該工作。這裏有一個稍微更簡潔的版本：

$("button").click(function(){ 
    $("#div1").load("myPage2.html"); 
});

看到jQuery.load()

來源

2014-01-07 21:57:27 Kyle

我原本沒有＃。沒有做任何事情。當我在網址前加上「＃」時，它隱藏了page1。 – hypermiler

在＃myPage2.html的＃符號可能是你錯誤的原因。

從

除此之外，如果你願意，你也可以這樣做：

$('button').click(function() { 

    $('#div1').load('myPage2.html'); 

});

來源

2014-01-07 21:58:03

如何使用Ajax到新的頁面加載到DIV

回答

相關問題