将jsp页面加载到div中

时间:2013-11-15 16:15:25

标签: javascript jquery

我想在div

中加载我的jsp页面

我在我的主js中有一个表有两列,第一列用于菜单,第二列用于div

我在没有成功的情况下尝试使用这些代码:

<script src="/test/extjs/jquery-latest.min.js" type="text/javascript"></script>
    <script src="/test/extjs/jquery.min.js" type="text/javascript"></script>

 $(function() {


        $('a').click(function() {
            $('#divpage').load($(this).attr('href'));
            return false;
        });
    });


 <table width="100%" height="100%">
     <tr>
     <td width="10%" height="100%"><div id='cssmenu'>
    <ul id="idGmenu">
       <li style="display: none;><a href="#"><span>Home</span></a></li>
       <li><a href="#"><span><spring:message code="taifSettingUP"/></span></a>
          <ul>
             <li class="current"><a href="/test/citizen.htm"><spring:message code="taifSettingCitizenUP"/></a></li>
             <li><a href="/test/encodingType.htm"><spring:message code="taifSettingTypeUP"/></a></li>

          </ul>
       </li>

       <li><a href='#'><span><spring:message code="taifCancellationsSuspensions"/></span></a>   
       <ul>
             <li><a href="/test/cancellSuspension.htm"><spring:message code="taifCancellationsSuspensions"/></a></li>       
          </ul>
       </li>
         <li><a href='#'><span><spring:message code="taifConsultingUP"/> </span></a>  
       <ul>
             <li><a href="/test/consultingOwner.htm"><spring:message code="taifConsultingOwnerUP"/></a></li>      
              <li><a href="/test/consultingDetailsUP.htm"><spring:message code="taifConsultingUPDetails"/></a></li>       
          </ul>
       </li>
    </ul>
    </div></td>
     <td  width="90%" height="100%"> 


        <div id="divpage"></div>    



    </td>
     </tr>
     </table>

第一个js jquery-latest.min.js用于css菜单

第二个js jquery.min.js用于将jsp页面加载到div

2 个答案:

答案 0 :(得分:1)

你的jquery片段很好。不是故障安全但有效,只需正确使用它(不要忘记<script></script>标签...... 尽量避免不必要的标签和表格。

的test.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
     $(function() {
            $('a').click(function() {
                $('#divpage').load($(this).attr('href'));
                return false;
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><a href="#">NO CONTENT HERE!*</a></li>
        <li><a href="a.html">Show me the SO site!</a></li>
    </ul>
    <div id="divpage">Content is coming!</div>
</body>

a.html

<html><head></head><body><h1>Hello, i'm the a.html!</h1></body></html>

答案 1 :(得分:0)

Have you tried returning an error.

$('#divpage').load($(this).attr('href'), function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});

Also, there is a 
$(document).on("ajaxStop", function(){

});

this runs when all the ajax on the page is done. alternatively there is an event called ajaxComplete.