在JSP頁面的動態部分的實施

我有一個Spring MVC的項目，在登錄後的第一頁是以下（下面由DispatcherServlet的映射鏈接的各一個）：在JSP頁面的動態部分的實施

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>HorarioLivre</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

    <link rel="stylesheet" href="css/style-main.css"> 
    <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
</head> 
<body> 
    <header> 
    <div class="container"> 
     <h1><a href="index.html">HorarioLivre</a></h1> 
     <nav> 
     <ul> 
      <li><a href="listagem_evento.html" rel="gb_page_fs[]" class="icon evento">Eventos</a></li> 
      <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li> 
      <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li> 
      <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li> 
      <li><a href="#">${usuario.nome}</a> 
      <ul class="submenu"> 
       <li><a href="usuario_perfil.html" class="icon perfil">Perfil</a></li> 
       <li><a href="usuario_config.html" class="icon settings">Configura&ccedil;&otilde;es</a></li> 
       <li><a href="usuario_logoff.html" class="icon logout">Sair</a></li> 
      </ul> 
      </li> 
     </ul> 
     </nav> 
    </div> 
    </header> 

    <section class="about"> 

    </section> 
</body> 
</html>

我問題是：有沒有什麼辦法顯示從這個頁面鏈接的頁面的內容（在'class = container'標識的部分，'class = about'標識的其他部分，使用javascript？內容無需加載整個頁面

UPDATE 1

繼here的示例之後，我對代碼做了三處更改。在div '容器' 的鏈接改爲：

<a href="#" onclick="loadpage('listagem_evento.html')" class="icon evento">

的ID添加到標籤：

<section class="about"> 
    <div id="result"> 

    </div> 
    </section>

我添加這段JavaScript代碼：

<script> 
    function httpGet(theUrl) 
    { 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       createDiv(xmlhttp.responseText); 
      } 
     } 
     xmlhttp.open("GET", theUrl, false); 
     xmlhttp.send();  
    } 

    function createDiv(responsetext) 
    { 
     var _body = document.getElementsById('result'); 
     _body.innerHTML = responsetext; 
    } 

    function loadpage(url) 
    { 
     var result = httpGet(url); 
     createDiv(result); 
    } 
    </script>

但現在當我點擊鏈接，沒有任何反應。我做錯了什麼？

來源

2014-02-27 Kleber Mota

您可以編寫單獨的HTML或JSP文件中有這些內容，使Ajax調用得到整個HTML內容爲「text/html的」，並把內容在適當的DIV。與JavaScript。 –

我對我的代碼做了更新，但沒有解決問題。你能看到我犯的錯嗎？ –

你可以在你的瀏覽器控制檯看到像螢火蟲，你有任何錯誤？ –

好的，我解決了這個問題。我採用如下方案（使用jQuery）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>HorarioLivre</title> 

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
    <script> 
    $(function() { 
      $('a').click(function() { 
       $('#divpage').load($(this).attr('href')); 
       return false; 
      }); 
     }); 
    </script> 

    <link rel="stylesheet" href="css/style-main.css"> 
</head> 
<body> 
    <header> 
    <div class="container"> 
     <h1><a href="index.html">HorarioLivre</a></h1> 
     <nav> 
     <ul> 
      <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li> 
      <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li> 
      <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li> 
      <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li> 
      <li><a href="#">${usuario.nome}</a> 
      <ul> 
       <li><a href="usuario_perfil.html" id="perfil" class="icon perfil">Perfil</a></li> 
       <li><a href="usuario_config.html" id="settings" class="icon settings">Configura&ccedil;&otilde;es</a></li> 
       <li><a href="usuario_logoff.html" id="logout" class="icon logout">Sair</a></li> 
      </ul> 
      </li> 
     </ul> 
     </nav> 
    </div> 
    </header> 
    <div id="divpage">Content is coming!</div> 
</body> 
</html>

來源

2014-02-27 23:36:53

在JSP頁面的動態部分的實施

回答

相關問題