史莱姆Slime
2018-02-19 17:26
采纳率: 25%
浏览 1.9k
已采纳

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">&nbsp;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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 技术影 2018-02-22 03:00
    已采纳

    看我加粗和斜体字部分,写的判断有问题,你的if就没有执行,没有创建XHR对象。
    改成 if (!window.xmlHttpRequest){
    XHR=new XMLHttpRequest();
    }

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • hashman8433 2018-02-20 08:52

    建议把方法中的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);
            }
    
    评论
    解决 无用
    打赏 举报
  • erlangwu 2018-02-21 03:22

    浏览器的差异和版本变化都比较快,建议使用内嵌式框架简单处理,兼容性更好。

    评论
    解决 无用
    打赏 举报
  • 技术影 2018-02-22 02:59

    看我加粗和斜体字部分,写的判断有问题


        <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">&nbsp;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(&quot;Msxml2.XMLHTTP&quot;);}catch(e){try{XHR= new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);}catch(e){}}<br> }<br> XHR.onreadystatechange=function(){<br> if (XHR.readyState===4){<br> if(XHR.status===200){<br> document.getElementById(&quot;content&quot;).innerHTML=XHR.responseText;<br> executeScript(XHR.responseText);<br> }<br> else if(XHR.status===404){<br> alert(&quot;出错了☹ (错误代码:404 Not Found),……!&quot;);return;<br> }<br> else if (XHR.status===403){<br> alert(&quot;出错了☹ (错误代码:403 Forbidden),……!&quot;);return;<br> }<br> }<br> };<br> XHR.open(&quot;GET&quot;,url,true);<br> XHR.send(null);<br> }<br>

    </body>
    

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题