在特定部门中加载外部页面内容

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