Question

我正在尝试使用javascript ajax从另一个页面加载div内容（此页面位于另一个在tomcat中运行的项目中）。

 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():
} );

从另一页加载Div内容

2 个答案: