如何使用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頁面

回答

相關問題