2017-04-01 85 views
0

我不知道你是否可以,如何调用一个页面例如test.php,以便它打开一个div而不是在新的页面,谢谢。呼叫test.php页面内的一个div

<!DOCTYPE html PUBLIC "> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Menu</title> 
<script type="text/javascript"> 

var loadedobjects="" 
var rootdomain="http://"+window.location.hostname 

function ajaxpage(url, containerid){ 
var page_request = false 
if (window.XMLHttpRequest) // if Mozilla, Safari etc 
page_request = new XMLHttpRequest() 
else if (window.ActiveXObject){ // if IE 
try { 
page_request = new ActiveXObject("Msxml2.XMLHTTP") 
} 
catch (e){ 
try{ 
page_request = new ActiveXObject("Microsoft.XMLHTTP") 
} 
catch (e){} 
} 
} 
else 
return false 
page_request.onreadystatechange=function(){ 
loadpage(page_request, containerid) 
} 
page_request.open('GET', url, true) 
page_request.send(null) 
} 

function loadpage(page_request, containerid){ 
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 
document.getElementById(containerid).innerHTML=page_request.responseText 
} 

function loadobjs(){ 
if (!document.getElementById) 
return 
for (i=0; i<arguments.length; i++){ 
var file=arguments[i] 
var fileref="" 
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding 
if (file.indexOf(".js")!=-1){ //If object is a js file 
fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src", file); 
} 
else if (file.indexOf(".css")!=-1){ //If object is a css file 
fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", file); 
} 
} 
if (fileref!=""){ 
document.getElementsByTagName("head").item(0).appendChild(fileref) 
loadedobjects+=file+" " //Remember this object as being already added to page 
} 
} 
} 

</script> 

<style type="text/css"> 
#leftcolumn{ 
float:left; 
width:150px; 
height: 400px; 
border: 3px solid black; 
padding: 5px; 
padding-left: 8px; 

} 

#leftcolumn a{ 
padding: 3px 1px; 
display: block; 
width: 100%; 
text-decoration: none; 
font-weight: bold; 
border-bottom: 1px solid gray; 
} 

#leftcolumn a:hover{ 
background-color: #FFFF80; 
} 

#rightcolumn{ 
float:left; 
width:550px; 
min-height: 400px; 
border: 3px solid black; 
margin-left: 10px; 
padding: 5px; 
padding-bottom: 8px; 
} 

* html #rightcolumn{ /*IE only style*/ 
height: 400px; 
} 
</style> 
</head> 

<body> 

<div id="leftcolumn"> 
<a href="javascript:ajaxpage('http://localhost/cars/player/menu.php', 'rightcolumn');">Menu</a> 
<a href="javascript:ajaxpage('http://www.google.it', 'rightcolumn');">Google</a> 

<div style="margin-top: 2em">Load CSS & JS files</div> 
<a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a> 

</div> 

<div id="rightcolumn"><h3>Choose a page to load.</h3></div> 
<div style="clear: left; margin-bottom: 1em"></div> 

</body> 

</html> 

这样,如果menu.php回忆的作品和我认为在本地服务器上的页面,但如果你调用的页面与谷歌,不会打开。

+0

你试过$(选择).load(网址,数据,回调); ??? @Mike –

+0

你可以给我一个我怎么加载的例子 – Mike

回答

0
<a href="javascript:void(0)" id="menu">Menu</a> 
<div id="rightcolumn"></div> 
<script> 
$(document).ready(function(){ 
    $("#menu").click(function(){ 
      $("#rightcolumn").load("http://localhost/player/menu.php"); 
    }); 
}); 
</script> 

您可以为所有元素做这样的...等等...

+0

谢谢你的回答,我根据建议做了几个测试,但是看起来不行。我编辑了原始帖子,把页面的完整代码, – Mike