如何使用javascript和/或html在div中显示返回的html页面

我想构建一个url，发送url并在同一页面的div或任何block元素中显示返回的html页面。最终，我想要做的是发送一个请求，只要用户输入名称，创建一个div来显示响应，用响应填充div，隐藏div，然后显示一个按钮或选项卡，供用户使用点击查看返回的文档。但现在我只想弄清楚如何在同一页面上将响应转换为div。如何使用javascript和/或html在div中显示返回的html页面

这看起来像一个基本的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>

来源

2015-04-01 user903724

你很可能想看看使用jQuery进行AJAX调用，然后从.success回调中获取HTML，并再次使用jQuery将其转储到div中。听起来比实际上更难。一些温柔的谷歌搜索应该会产生不错的结果。 – 2015-04-01 19:05:05

[如何使用ajax加载外部页面]可能的重复（http://stackoverflow.com/questions/15375929/how-to-load-external-page-using-ajax） – ochi 2015-04-01 19:06:48

谢谢jonny，我刚刚花了五小时Google搜索，并没有得到任何地方，这就是为什么我在这里。 – user903724 2015-04-01 19:07:16

这听起来像你想做一个ajax请求，它返回HTML，然后呈现该div中的HTML？

如果你不是，我也建议使用jQuery。它会让你的生活变得更轻松。

你的文件（S）将需要看起来像这样：

HTML

.... 
<div id="mydiv"></div> 
....

JQUERY

$(document).ready(function() { 
    $.ajax({ 
     'type': 'get', 
     'contentType': 'text/plain', 
     'url': 'path/to/your/script/', 
     'dataType': 'html', 
     'timeout': 50000 
    }).done(function (data) { 
     // success 
     $('#mydiv').html(data); 
    }).fail(function (error) { 
     // something went wrong 
     console.log(error); 
    }); 
});

为了简单起见，假设你所返回的HTML是：

HTML

<p>Hello World!</p>

你的页面（Ajax请求运行后）将是这样的：

HTML

.... 
<div id="mydiv"><p>Hello World!</p></div> 
....

这应该让你滚。

来源

2015-04-01 19:12:36 Damon

这是一个比我更好的答案（几乎是教科书）。这让我很伤心:( – 2015-04-01 19:15:43

dragonslovetacos，感谢你的回复。这是我的窘境：我不想使用JQuery。由于HTML是关于发送请求并显示结果页面的，我认为这是一种简单的方式你认为AJAX是唯一的解决方案吗？ – user903724 2015-04-01 19:17:22

不，jQuery提供了有关JavaScript功能的辅助包装，你可以在纯JavaScript中使用“xmlhttprequest”http://www.w3schools.com/xml/ xml_http.asp – 2015-04-01 19:18:31

为了扩大对我的评论，这个代码将几乎为你做它

$.ajax({ 
    url: "mypage.html", 
    cache: false 
}) 
    .done(function(html) { 
    $("#results").append(html); 
    });

有了真正的好支持文档发现这里http://api.jquery.com/jquery.ajax/

来源

2015-04-01 19:13:16

我真的很困惑。几天前，我用JQuery Tabs小部件进行了愚弄。如果您在创建选项卡时传递URL，则在单击选项卡时会自动加载内容。 JQuery使用AJAX引擎来做到这一点？我真的不明白Tabs的例子，但似乎涉及到一个iframe。我放弃了JQuery，因为我有一个主要工作的1.9解决方案，然后发现tabs.add（）和tabs.remove（）已被弃用。所以我回到了“纯粹的”html/js解决方案。 – user903724 2015-04-01 19:24:50

因此，您希望在单击该选项卡时从服务器加载/刷新选项卡内容，并且能够动态创建/删除选项卡？在jQuery背后包装了xmlhttprequest对象，使其更加用户友好 – 2015-04-01 19:31:46

感谢所有回答我的查询。特别是jonny谁做了一些令人印象深刻的手持。我真的不明白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。我以为我看到JQuery在标签小部件中使用iframe，但直到看起来我只能获得基于JQuery的回复时，我才追求这条大道。

来源

2015-04-01 20:44:13 user903724

如何使用javascript和/或html在div中显示返回的html页面

回答

相关问题