文章/答案/技术大牛

发布

社区首页 >问答首页 >JSP页面中动态部分的实现

问JSP页面中动态部分的实现
EN

Stack Overflow用户

提问于 2014-02-27 01:47:03

回答 1查看 1.8K关注 0票数 0

我有一个Spring项目，登录后的第一个页面如下(下面的每个链接都由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=容器”标识的部分中，在使用javascript的“class=约”标识的另一部分中)？我想用这个加载内容，而不需要加载整个页面。

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

但是现在当我点击链接时，什么都不会发生。我做错什么了？

ajax

spring

jsp

javascript

jquery

回答 1

Stack Overflow用户

发布于 2014-02-27 23:36:53

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22057437

复制

相似问题

问JSP页面中动态部分的实现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSP页面中动态部分的实现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSP页面中动态部分的实现
EN