Java 控制表单显示提交输出的位置_Java_Html_Spring_Spring Mvc

Java 控制表单显示提交输出的位置

java html spring spring-mvc

Java 控制表单显示提交输出的位置,java,html,spring,spring-mvc,Java,Html,Spring,Spring Mvc,在我的web应用程序中，我有一个主页，其中用户可用的选项放在屏幕顶部的固定侧栏中，并且每个选项都在同一页面的标记内打开我的问题是：当此内容是一个表单，并且我将其提交给服务器时，经过处理后，输出页面不会在此中打开，而是在整个导航空间中打开。我想要的是一种捕获此返回的方法，并将其显示在与原始返回相同的中我的主页的代码是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"

在我的web应用程序中，我有一个主页，其中用户可用的选项放在屏幕顶部的固定侧栏中，并且每个选项都在同一页面的标记

内打开

我的问题是：当此内容是一个表单，并且我将其提交给服务器时，经过处理后，输出页面不会在此

中打开，而是在整个导航空间中打开。我想要的是一种捕获此返回的方法，并将其显示在与原始返回相同的

中

我的主页的代码是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>HorarioLivre</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body onload="close_page()">

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">HorarioLivre</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#" onclick="load_page('listagem_evento.html')">Evento</a></li>
            <li><a href="#" onclick="load_page('listagem_horario.html')">Lista Horarios</a></li>
            <li><a href="#" onclick="load_page('cadastra_horario.html')">Cadastra Horarios</a></li>
            <li><a href="#" onclick="load_page('listagem_usuario.html')">Usuarios</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">${usuario.nome} <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#" onclick="load_page('usuario_perfil.html')">Perfil</a></li>
                <li><a href="#" onclick="load_page('usuario_config.html')">Configurações</a></li>
                <li><a href="usuario_logout.html">Sair</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

<div class="page-header">
        <h1></h1>
      </div>

          <div class="panel panel-default" id="results">
            <div class="panel-heading">
              <div align="right"><button type="button" class="btn btn-lg btn-danger" onclick="close_page()">Fechar</button></div>
            </div>
            <div class="panel-body" id="content">
              Panel content
            </div>
          </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    function load_page(url){
        $('#results').css("display", "block");
        $('#content').load(url);
        $('#container').draggable();
    }
    function close_page(){
        $('#results').css("display", "none");
        $('#content').empty();
    }
    </script>
  </body>
</html>

有人对如何做到这一点有什么想法吗？

好吧，spring mvc只需打开一个新页面，其中包含您在ModelAndView中设置的内容。如果您只想在页面的某个部分加载某些东西（在本例中），则需要纯javascript/jquery ajax。因此，需要采取以下步骤：

添加javascript，它将向控制器发出ajax请求

控制器需要返回JSON（@ResponseBody可以帮助您）

您必须使用javascript/jquery进行一些DOM操作，以将JSON答案放入div

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lista de Eventos</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="alert alert-info">
    <strong>Eventos</strong> Segue a lista de eventos cadastrados.
</div>

<div class="container">
        <div class="row">
            <div class="col-md-3">Nome</div>
            <div class="col-md-3">Descri&ccedil;&atilde;o</div>
            <div class="col-md-3">Periodo</div>
            <div class="col-md-3">Dura&ccedil;&atilde;o</div>
        </div>

        <c:forEach var="item" items="${lista}">
        <div class="row">
            <div class="col-md-3"><c:out value="${item.nome}"/></div>
            <div class="col-md-3"><c:out value="${item.descricao}"/></div>
            <div class="col-md-3"><c:out value="${item.data_inicial}"/> - <c:out value="${item.data_final}"/></div>
            <div class="col-md-3"><c:out value="${item.duracao}"/></div>
        </div>
        </c:forEach>
</div>

<div class="alert alert-info">
    <strong>Novo</strong> Cadastre um novo evento.
</div>

<form method="post" action="cad_evento.html">
    <input type="text" name="nome" placeholder="Nome" size=20 maxlength=40> <br/>

    <input type="text" name="descricao" placeholder="Descri&ccedil;&atilde;o" size=30 maxlength=100> <br/>

    <h3>Periodo da Data</h3>
    inicio: <input name="data_inicial" placeholder="DD-MM-AAAA" required pattern="\d{2}-\d{2}-\d{4}" /> <br/>
    final: <input name="data_final" placeholder="DD-MM-AAAA" required pattern="\d{2}-\d{2}-\d{4}" /> <br/>

    <h3>Periodo do Hor&aacute;rio</h3>
    inicio: <input name="hora_inicial" placeholder="HH:MM:SS" required pattern="\d{2}:\d{2}:\d{2}" /> <br/>
    final: <input name="hora_final" placeholder="HH:MM:SS" required pattern="\d{2}:\d{2}:\d{2}" /> <br/>

    <input type="text" name="duracao" placeholder="dura&ccedil;&atilde;o" size=20 maxlength=2> <br/>

    <button type="submit" class="btn btn-lg btn-primary">Cadastrar</button>
</form>

</body>
</html>

@RequestMapping(value="/cad_evento", method=RequestMethod.POST)
    public ModelAndView cadastra_evento(@RequestParam("nome") String nome, @RequestParam("descricao") String descricao, @RequestParam("data_inicial") String data_inicial, @RequestParam("hora_inicial") String hora_inicial, @RequestParam("data_final") String data_final, @RequestParam("hora_final") String hora_final, @RequestParam("duracao") int duracao) {
        if(sessao != null)
        {
            if(sessao.getUsuario().temAutorizacao("cad_evento"))
            {
                Date d_inicio = new Date(Date.parse(data_inicial));
                Date d_final = new Date(Date.parse(data_final));
                Time h_inicio = new Time(Time.parse(hora_inicial));
                Time h_final = new Time(Time.parse(hora_final));

                EventoDAO evento = new EventoDAO(nome, descricao, d_inicio, d_final, h_inicio, h_final, duracao, sessao.getUsuario());
                int saida = evento.cadastra();

                if(saida == 0) 
                {
                    ModelAndView mav = new ModelAndView();
                    mav.addObject("message", "Erro ao cadastrar o evento");
                    return mav;
                }
                else
                {
                    ModelAndView mav = new ModelAndView();
                    mav.setViewName("/listagem_evento");
                    return mav;
                }
            }
            else
            {
                ModelAndView mav = new ModelAndView();
                mav.addObject("message", "Usuário sem permissão de acesso");
                return mav;
            }
        }
        else 
        {
            ModelAndView mav = new ModelAndView();
            mav.setViewName("/usuario_login_page");
            return mav;
        }
    }