如何使用javascript和/或html在div中显示返回的html页面
我想构建一个url，发送url并在同一页面上的div或任何block元素中显示返回的html页面。 最终，我要做的是在用户输入名称后立即发送请求，创建一个div来显示响应， 用响应填充div，隐藏div，然后显示按钮或选项卡，供用户单击以查看返回的文档。 但现在我只是想弄清楚如何将响应放入同一页上的div中 这似乎是一个基本的HTML活动，但我不知道如何将返回的页面定向到div，而不是让它替换原始页面。 我更喜欢用普通的HTML5和javascript，而不是JQuery，但是如果JQuery是唯一的方法，我将处理这个学习曲线如何使用javascript和/或html在div中显示返回的html页面,javascript,html,Javascript,Html,我想构建一个url，发送url并在同一页面上的div或任何block元素中显示返回的html页面。 最终，我要做的是在用户输入名称后立即发送请求，创建一个div来显示响应， 用响应填充div，隐藏div，然后显示按钮或选项卡，供用户单击以查看返回的文档。 但现在我只是想弄清楚如何将响应放入同一页上的div中 这似乎是一个基本的HTML活动，但我不知道如何将返回的页面定向到div，而不是让它替换原始页面。 我更喜欢用普通的HTML5和javascript，而不是JQuery，但是如果JQuery是
<html>
<body onload="buildPage()">
<div id="documents"></div>
</body>
<script>
function buildPage() {
var name="somename" ; // this will eventually come from user input and be passed in
var documentName = name + ".html";
var url ="http://localhost:8080/docserver/getpage?name=" + documentName;
// create a div to display the requested document
var newDiv = document.createElement("div");
newDiv.id = documentName;
newDiv.style.visibility = "hidden";
// ... probably need to do something here to direct the url response into the new div
// nest the newDiv in the existing div
document.getElementById("documents").appendChild(newDiv) ;
//TBD create a button to display the returned document
}
</script>
</html>
函数构建页（）{
var name=“somename”；//这最终将来自用户输入并传入
var documentName=name+“.html”；
变量url=”http://localhost:8080/docserver/getpage?name=“+文件名；
//创建一个div以显示请求的文档
var newDiv=document.createElement（“div”）；
newDiv.id=documentName；
newDiv.style.visibility=“隐藏”；
//…可能需要在此处执行一些操作，以将url响应定向到新的div中
//将newDiv嵌套在现有div中
document.getElementById（“documents”）.appendChild（newDiv）；
//TBD创建一个按钮以显示返回的文档
}
....
<div id="mydiv"></div>
....
<p>Hello World!</p>
....
<div id="mydiv"><p>Hello World!</p></div>
....
....
<div id="mydiv"></div>
....
<p>Hello World!</p>
....
<div id="mydiv"><p>Hello World!</p></div>
....
你好，世界
....
<div id="mydiv"></div>
....
<p>Hello World!</p>
....
<div id="mydiv"><p>Hello World!</p></div>
....
。。。。
你好，世界
....
这应该会让你开动脑筋。为了扩展我的评论，这段代码基本上可以帮你做到这一点
$.ajax({
url: "mypage.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
这里有非常好的支持文档感谢所有回答我问题的人。尤其是乔尼，他做了一些令人印象深刻的牵手动作。我真的不懂JQuery，所以我想要一个纯html/js解决方案。这就是我最后要做的
function buildPage() {
var name="somename" ; // this will eventually come from user input and be passed in
var documentName = name + ".html";
var url="http://localhost:8080/FDS/documents?filename=" + documentName ;
// create a div to display the requested document
var newDiv = document.createElement("div");
newDiv.id = documentName;
//newDiv.style.visibility = "hidden";
// create an iframe to place in the div
var newIframe = document.createElement("iframe") ;
newIframe.src = url ;
// nest the iframe in the div just created
newDiv.appendChild(newIframe) ;
// nest the newDiv in the existing div
document.getElementById("documents").appendChild(newDiv) ;
缺少的组件是一个iframe。我想我在tabs小部件中看到了JQuery使用iframes，但直到看起来我只会得到基于JQuery的回复，我才开始尝试这种方法。您很可能想看看使用JQuery进行AJAX调用，然后从.success回调中获取HTML，然后再次使用jQuery将其转储到div中。听起来比实际情况更难。一些温和的谷歌搜索应该会产生不错的结果。可能重复感谢jonny，我刚刚花了五个小时的谷歌搜索却一无所获，这就是我来这里的原因。你谷歌搜索的关键术语：Ajax这是一个比我好得多的答案（几乎是教科书式的）。这让我很难过：（dragonslovetacos，谢谢你的回答。这是我的问题：我不想使用JQuery。因为HTML是关于发送请求和显示结果页面的，所以我认为有一种简单的方法可以实现我想要的。你是说AJAX是唯一的解决方案吗？不，JQuery提供了JavaScript功能的帮助包装。哟您可以使用“xmlhttprequest”在纯JavaScript中自己完成@jonnyknowsbest是正确的，你不需要使用jQuery，你也不需要开车去你要去的地方。有时候这比走路容易多了。例如，看看我上面的脚本——它只是一个ajax调用。将它与你必须在下面编写的所有javascript进行比较。它只会让事情“更简单”。）作为结束语，我建议您接受dragonslovetacos的回答，因为在我看来，这是一个非常清晰和简洁的例子，说明了您最初的问题。我真的很困惑。几天前我还玩了JQuery Tabs小部件。如果您在创建选项卡时传递URL，则在创建选项卡时会自动加载内容被点击。JQuery是不是在幕后使用AJAX来实现这一点？我真的不了解选项卡的示例，但似乎涉及到了iframe。我放弃了JQuery，因为我得到了一个1.9的解决方案，基本上可以正常工作，然后发现Tabs.add（）和Tabs.remove（）已弃用。因此我返回到“纯”html/js解决方案。因此，您希望在单击该选项卡时从服务器加载/刷新选项卡内容，并能够动态创建/删除选项卡？在引擎盖下，jQuery包装了xmlhttprequest对象，使其更为用户友好