從另一個頁面加載Div內容

Question

我正在嘗試使用javascript ajax從另一個頁面（該頁面在tomcat中一起運行的另一個項目）中加載div內容。

 var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/prob-services/clogin#login_page');
xhr.onload = function() {
alert(xhr.status);
console.log(xhr);
    if (xhr.status === 200) {
        var modal = document.getElementById("modal_dialog");
        modal.innerHTML = xhr.responseText;
    }
};
xhr.send();

問題是當我登錄xhr我看到responseURL一直到#為止，因此ajax僅采用http://localhost:8080/prob-services/clogin而不是http://localhost:8080/prob-services/clogin#login_page 。 這就是為什么它會加載整個頁面。 有沒有辦法在沒有JQuery的情況下僅獲取div內容？

Answer 1

篩選整個頁面的解決方案：

創建一個虛擬的隱藏DOM元素，例如

<div style='display: none' id="loadedHTML"></div>

然后將您從服務器收到的整個頁面的HTML放入其中：

document.getElementById('loadedHTML').innerHTML = xhr.responseText;

現在您可以搜索此組件內的html。 假設您想要的部分位於頁面內名為“ MyDiv”的div中：

var modal = document.getElementById("modal_dialog");
modal.innerHTML = document.getElementById('MyDiv').innerHTML;

可以自由地詢問更多，如果還不夠清楚。

Answer 2

使用此jQuery load()函數

$('#modal_dialog').css('opacity','1').load('http://localhost:8080/prob-services/clogin',function() { 
    alert():
} );