Question

我有一个Spring MVC项目，其中登录后的第一个页面如下（下面的每个链接都由DispatcherServlet映射）：

<!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？I想要加载内容而不需要加载整个页面。

更新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>

但是现在当我点击链接时，没有任何反应。我做错了什么？

Answer 1

好的，我解决了这个问题。我使用以下解决方案（使用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>

在JSP页面中实现动态部分

1 个答案: