javaweb ajax+div实现左边菜单右边内容时点击菜单应该触发事件但是右边没反应
这样写点击左边菜单时无论怎么点击,叫content那个div都没有内容都不会更新,我猜是不是css的问题
这是代码,请问在此基础上要怎么写才能实现左边菜单右边内容呢
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<title>JSP Page</title>
</head>
<body>
<a id="top"></a>
<div id="container" style="width:100% " >
<div id="header" style="background-color:#ACCCCD;height:20%">
<div id="systemTitle">
<h1>22222333333</h1>
<h2>2233</h2>
</div>
</div>
<div id="maintain" style="float: left; display: inline; height:70%;width: 100%">
<div id="sitebar" style="background-color:red;width:20%;float: left">
<ul >
<li><a href="#repMenu"> 00</a></li>
<li><ul id="repMenu">
<li><a href="###" onclick="showAtRight('mod1.jsp')">01</a></li>
<li><a href="###" onclick="showAtRight('mod2.jsp')">02</a></li>
</ul></li>
<li><a href="###" onclick="showAtRight('Info.jsp')">1</a></li>
<li><a href="###" onclick="showAtRight('mod3.jsp')">2</a><li>
<li><a href="###" onclick="showAtRight('check.jsp')">3</a></li>
<li><a href="###" onclick="showAtRight('adduser.jsp')">4</a></li>
</ul>
</div>
<div id="content" style="background-color:#8BC34A;width:80%;float: right">
//此处显示内容
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;height:10%">
底部部分
<a href="#top">链接到标题</a>
</div>
</div>
<script type="text/javascript">
function showAtRight(url){
var XHR;
if (window.xmlHttpRequest){
XHR=new XMLHttpRequest();
}
else if (window.ActiveXObject){
try{XHR= new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XHR= new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}
}
XHR.onreadystatechange=function(){
if (XHR.readyState===4){
if(XHR.status===200){
document.getElementById("content").innerHTML=XHR.responseText;
executeScript(XHR.responseText);
}
else if(XHR.status===404){
alert("出错了☹ (错误代码:404 Not Found),……!");return;
}
else if (XHR.status===403){
alert("出错了☹ (错误代码:403 Forbidden),……!");return;
}
}
};
XHR.open("GET",url,true);
XHR.send(null);
}
</script>
</body>
</html>
看我加粗和斜体字部分,写的判断有问题,你的if就没有执行,没有创建XHR对象。
改成 if (!window.xmlHttpRequest){
XHR=new XMLHttpRequest();
}
建议把方法中的if 语句修改一下
我用谷歌浏览器运行的时候 两个if 判断都为false 因为对象没有创建所以无法正常调用请求
function showAtRight(url){
var XHR;
if (window.ActiveXObject){
try{XHR= new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XHR= new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}
} else {
XHR=new XMLHttpRequest();
}
XHR.onreadystatechange=function(){
if (XHR.readyState===4){
if(XHR.status===200){
document.getElementById("content").innerHTML=XHR.responseText;
executeScript(XHR.responseText);
}
else if(XHR.status===404){
alert("出错了☹ (错误代码:404 Not Found),……!");return;
}
else if (XHR.status===403){
alert("出错了☹ (错误代码:403 Forbidden),……!");return;
}
}
};
XHR.open("GET",url,true);
XHR.send(null);
}
浏览器的差异和版本变化都比较快,建议使用内嵌式框架简单处理,兼容性更好。
看我加粗和斜体字部分,写的判断有问题
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<title>JSP Page</title>
</head>
<body>
<a id="top"></a>
<div id="container" style="width:100% " >
<div id="header" style="background-color:#ACCCCD;height:20%">
<div id="systemTitle">
<h1>22222333333</h1>
<h2>2233</h2>
</div>
</div>
<div id="maintain" style="float: left; display: inline; height:70%;width: 100%">
<div id="sitebar" style="background-color:red;width:20%;float: left">
<ul >
<li><a href="#repMenu"> 00</a></li>
<li><ul id="repMenu">
<li><a href="###" onclick="showAtRight('mod1.jsp')">01</a></li>
<li><a href="###" onclick="showAtRight('mod2.jsp')">02</a></li>
</ul></li>
<li><a href="###" onclick="showAtRight('Info.jsp')">1</a></li>
<li><a href="###" onclick="showAtRight('mod3.jsp')">2</a><li>
<li><a href="###" onclick="showAtRight('check.jsp')">3</a></li>
<li><a href="###" onclick="showAtRight('adduser.jsp')">4</a></li>
</ul>
</div>
<div id="content" style="background-color:#8BC34A;width:80%;float: right">
//此处显示内容
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;height:10%">
底部部分
链接到标题
<br>
function showAtRight(url){<br>
var XHR;<br>
if (**_window.xmlHttpRequest_**){//此处应该写成 !window.xmlHttpRequest<br>
XHR=new XMLHttpRequest();<br>
}<br>
else if (window.ActiveXObject){<br>
try{XHR= new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XHR= new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}<br>
}<br>
XHR.onreadystatechange=function(){<br>
if (XHR.readyState===4){<br>
if(XHR.status===200){<br>
document.getElementById("content").innerHTML=XHR.responseText;<br>
executeScript(XHR.responseText);<br>
}<br>
else if(XHR.status===404){<br>
alert("出错了☹ (错误代码:404 Not Found),……!");return;<br>
}<br>
else if (XHR.status===403){<br>
alert("出错了☹ (错误代码:403 Forbidden),……!");return;<br>
}<br>
}<br>
};<br>
XHR.open("GET",url,true);<br>
XHR.send(null);<br>
}<br>
</body>