在特定部門中加載外部頁面內容

Question

我想在特定部門中顯示外部頁面內容。我發現了一些像iframe等解決方案，但沒有什麼幫助我很多。

<ul class="nav nav-pills"> 
    <li class="active"> 
     <a data-toggle="pill" href="#home">Account Details</a> 
    </li> 
    <li>  
     <a data-toggle="pill" href="#menu1">Wish List</a> 
    </li> 
    <li> 
     <a data-toggle="pill" href="#menu2">Edit ACCOUNT</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE" ## 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE1" ## 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE2" ## 
    </div> 
</div> 

我該怎麼做？基於Rorys'評論爲您的HTML

Answer 1

方法：

$("#home").load("/MTSITE/PAGE", function() { 
    console.log("Loaded content for home."); 
}); 

$("#menu1").load("/MTSITE/PAGE1", function() { 
    console.log("Loaded content for menu1."); 
}); 

$("#menu2").load("/MTSITE/PAGE2", function() { 
    console.log("Loaded content for menu2."); 
}); 

如果你不想登錄您的控制檯，您可以使用：

$("#menu2").load("/MTSITE/PAGE2"); 

Answer 2

你可以做這樣的方式使用ajax。

的jsfiddle：https://jsfiddle.net/eua98tqa/10/

HTML：

<ul class="nav nav-pills"> 
<li class="active"> 
    <a data-toggle="pill" href="#home">Account Details</a> 
</li> 
<li>  
    <a data-toggle="pill" href="#menu1">Wish List</a> 
</li> 
<li> 
    <a data-toggle="pill" href="#menu2">Edit ACCOUNT</a> 
</li> 
</ul> 
<div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 

</div> 
<div id="menu1" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE1" ## 
</div> 
<div id="menu2" class="tab-pane fade"> 
    ## I WANT CONTENT OF "/MTSITE/PAGE2" ## 
</div> 
</div> 

的Javascript：

$.get('Your URL') 
.fail(function(xhr, err){ 
$('#home').append("No data"); 
}) 
.then(function(responseData) { 
    //responseData is the contents of the other page. Do whatever you want with it. 
    $('#home').append(responseData); 
});