1. 首页
  2. 问答
  3. 隐藏参数URL（jQuery和Grails的）

隐藏参数URL（jQuery和Grails的）

2017-08-15 64 views
0

我想要做的是，当用户完成 “Titulacion”视图的形式并按下“NUEVO”这一观点的按钮，它是重定向到 我自己到“Portada”视图，而不显示 URL的参数，如下图所示。隐藏参数URL（jQuery和Grails的）

click image URL

的代码工作正常。

文件“Titulación.gsp”

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="layout" content="layoutPlantilla"> 
    <title>Titulación</title> 

    <!-- Enlaza los estilos de los ficheros '.css' --> 
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/estilosCabeceras.css"/> 
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/validaciones.css"/> 

    <!-- Enlaza el codigo de ficheros jQuery --> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQuerySelectores.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryBotones.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryMensajes.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryAjax.js"/> 

    <script> 
     var enlaceObjetos = { 
      urlTitulacion: "${createLink(controller:"Titulacion", action:"selectTitulacion")}", 
      urlAsignatura: "${createLink(controller:"Titulacion", action:"selectAsignatura")}", 
      urlValidaGuia: "${createLink(controller:"GuiaDocente", action:"validaGuiaDocente")}", 
      urlBusquedaGuia: "${createLink(controller:"MenuGuiasDocentes", action:"index")}" 
     } 
    </script> 
</head> 

<body> 
    <g:if test="${session.getAttribute("e-mail")}"> 

     <form id="idFormTitulacion"> 
      <div class="container-fluid text-center"> 
       <div class="row content"> 

        <div class="col-sm-12 text-left"> 
         <h1>Titulación</h1> 
         <hr> 

         <!-- Titulacion --> 
         <div class="form-group"> 
          <label for="titulacion">Titulación</label> 

          <!-- Muestra mensaje de error si no se selecciona en el select 'titulacion' --> 
          <label class="error errorTitulacion" for="titulacion"></label> 

          <select id="titulacion" name="titulacion" class="form-control titulacion select"> 
            <option value="" hidden>Seleccione opción...</option> 
            <option value="vacio"></option> 
           <g:each in="${consultaTitulacion}" var="indice"> 
            <option>${indice}</option> 
           </g:each> 
          </select> 
         </div> 

         <!-- Asignatura en espanol--> 
         <div class="form-group"> 
          <label for="asignatura">Asignatura</label> 

          <!-- Muestra mensaje de error si no se selecciona en el select 'asignatura' --> 
          <label class="error errorAsignatura" for="asignatura"></label> 

          <select id="asignatura" name="asignatura" class="form-control titulacion select"> 
            <option value="" hidden>Seleccione opción...</option> 
            <option value="vacio"></option> 
           <g:each in="${consultaAsignatura}" var="indice"> 
            <option>${indice}</option> 
           </g:each> 
          </select> 
         </div> 

         <!-- curso academico --> 
         <div class="form-group"> 
          <label for="cursoAcademico">Curso académico</label> 

          <!-- Muestra mensaje de error si no se selecciona en el select 'cursoAcademico' --> 
          <label class="error errorCursoAcademico" for="cursoAcademico"></label> 

          <select id="cursoAcademico" name="cursoAcademico" class="form-control select"> 
           <option value="" hidden>Seleccione opción...</option> 
           <option value="vacio"></option> 
           <option value="2016/17">2016/17</option> 
           <option value="2017/18">2017/18</option> 
           <option value="2018/19">2018/19</option> 
          </select> 
         </div> 

         <!-- Modalidad --> 
         <div class="form-group"> 
          <label for="modalidad">Modalidad</label> 

          <!-- Muestra mensaje de error si no se selecciona en el select 'modalidad' --> 
          <label class="error errorModalidad" for="modalidad"></label> 

          <select id="modalidad" name="modalidad" class="form-control select"> 
           <option value="" hidden>Seleccione opción...</option> 
           <option value="vacio"></option> 
           <option value="Presencial">Presencial</option> 
           <option value="Semipresencial">Semipresencial</option> 
           <option value="A distancia">A distancia</option> 
          </select> 
         </div> 

        </div> 
       </div> 

       <button id="botonNuevo" type="button" class="btn btn-primary">Nuevo</button> 
       <button id="botonBuscar" type="button" class="btn btn-primary">Buscar</button> 

      </div> 

     </form> 
    </g:if> 
</body> 

</html>

文件“Portada.gsp”

<!DOCTYPE html> 
<html> 

<head> 
    <title>Portada</title> 
    <meta name="layout" content="layoutPlantilla" /> 

    <!-- Enlaza los estilos de los fichero '.css' --> 
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/estilosCabeceras.css"/> 
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/validaciones.css"/> 
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/estilosToast.css"/> 

    <!-- Enlaza el codigo de los ficheros jQuery --> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQuerySelectores.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryBotones.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryMensajes.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryTextos.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryAjax.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryToast.js"/> 
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryPaginacion.js"/> 

    <script> 
     var enlaceObjetos = ({ 
      urlTitulacion: "${createLink(controller:"Titulacion", action:"selectTitulacion")}", 
      urlAsignatura: "${createLink(controller:"Titulacion", action:"selectAsignatura")}", 
      urlIdAsignatura: "${createLink(controller:"GuiaDocente", action:"idAsignatura")}", 
      urlValidaGuia: "${createLink(controller:"GuiaDocente", action:"validaGuiaDocente")}", 
      urlActualizacionPortada: "${createLink(controller:"GuiaDocente", action:"actualizacionPortada")}", 
      urlInsercionPortada: "${createLink(controller:"GuiaDocente", action:"insercionPortada")}", 
      urlIdGuiaDocente: "${createLink(controller:"GuiaDocente", action:"idGuiaDocente")}", 
      urlObtencionMateria: "${createLink(controller:"GuiaDocente", action:"obtencionMateria")}", 
      urlInsercionAsignatura: "${createLink(controller:"GuiaDocente", action:"insercionMateria")}" 
     }); 

     //se muestran y se ocultan los 'div' 
     $(function() { 
      if (window.location.hash === "#insercion") { 
       $("#btnInsercion2").show(); 
       $("#btnInsercion1").hide(); 
      } 
     }); 

     $(function() { 
      if (window.location.hash === "#modificacion") { 
       $("#btnModificacion").show(); 
       $("#btnInsercion1").hide(); 
      } 
     }); 

     $(function() { 
      if (window.location.hash === "#reutilizacion") { 
       $("#btnReutilizacion1").show(); 
       $("#btnInsercion1").hide(); 
       $("#titulacion").prop("disabled", true); 
       $("#asignatura").prop("disabled", true); 
      } 
     }); 

     $(function() { 
      if (window.location.hash === "#reutilizado") { 
       $("#btnReutilizacion2").show(); 
       $("#btnInsercion1").hide(); 
       $("#titulacion").prop("disabled", true); 
       $("#asignatura").prop("disabled", true); 
      } 
     }); 

    </script> 
</head> 

<body> 
    <g:if test="${session.getAttribute("e-mail")}"> 

     <form id="idFormPortada"> 
      <div class="container-fluid text-center"> 
       <div class="row content"> 

        <div class="col-sm-12 text-left"> 
         <h1>Portada</h1> 
         <hr> 

         <!-- Titulacion --> 
         <div class="form-group"> 
          <label for="titulacion">Titulacion</label> 
          <select id="titulacion" name="titulacion" class="form-control portada select"> 
            <option value="" hidden>${titulacion}</option> 
           <g:each in="${consultaTitulacion}" var="indice"> 
            <option>${indice}</option> 
           </g:each> 
          </select> 
         </div> 

         <!-- Asignatura en espanol--> 
         <div class="form-group"> 
          <label for="asignatura">Asignatura en español</label> 
          <select id="asignatura" name="asignatura" class="form-control portada select"> 
            <option value="" hidden>${asignatura_esp}</option> 
           <g:each in="${consultaAsignatura}" var="indice"> 
            <option>${indice}</option> 
           </g:each> 
          </select> 
         </div> 

         <!-- Asignatura en ingles --> 
         <div class="form-group"> 
          <label for="asignatura_ing">Asignatura en inglés</label> 
          <input id="asignatura_ing" name="asignatura_ing" class="form-control" value="${asignatura_ing}" type="text"> 
         </div> 

         <!-- Curso academico --> 
         <div class="form-group"> 
          <label for="cursoAcademico">Curso academico</label> 
          <select id="cursoAcademico" name="cursoAcademico" class="form-control select"> 
           <option value="" hidden>${cursoAcademico}</option> 
           <option>2016/17</option> 
           <option>2017/18</option> 
           <option>2018/19</option> 
          </select> 
         </div> 

         <!-- Modalidad --> 
         <div class="form-group"> 
          <label for="modalidad">Modalidad</label> 
          <select id="modalidad" name="modalidad" class="form-control select"> 
           <option value="" hidden>${modalidad}</option> 
           <option>Presencial</option> 
           <option>Semipresencial</option> 
           <option>A distancia</option> 
          </select> 
         </div> 

        </div> 
       </div> 

       <!-- boton insercion 'guardar' deshabilitado --> 
       <div id="btnInsercion1"> 
        <!-- boton indice --> 
        <button type="button" class="btn btn-primary botonIndice">Indice</button> 

        <!-- boton guardar --> 
        <button type="button" class="btn btn-primary botonInsertar" disabled>Guardar</button> 

        <!-- paginacion --> 
        <nav aria-label="..."> 
         <ul class="pagination"> 
          <li class="page-item disabled"> 
           <a class="page-link" tabindex="-1">Anterior</a> 
          </li> 

          <!-- pagina actual --> 
          <li class="page-item active"> 
           <a href="#">1</a> 
          </li> 

          <li class="page-item"><a href="#" class="opcAsignatura">2</a></li> 
          <li class="page-item"><a href="${createLink(action: "descripcionAsignatura")}">3</a></li> 
          <li class="page-item"><a href="${createLink(action: "requisitosPrevios")}">4</a></li> 
          <li class="page-item"><a href="${createLink(action: "objetivos")}">5</a></li> 

          <li class="page-item"> 
           <a href="#" class="opcAsignatura">Siguiente</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

       <!-- boton insercion 'guardar' habilitado --> 
       <div id="btnInsercion2" hidden> 
        <!-- boton indice --> 
        <button type="button" class="btn btn-primary botonIndice" disabled>Indice</button> 

        <!-- boton guardar --> 
        <button type="button" class="btn btn-primary botonInsertar">Guardar</button> 

        <!-- paginacion --> 
        <nav aria-label="..."> 
         <ul class="pagination"> 
          <li class="page-item disabled"> 
           <a class="page-link" tabindex="-1">Anterior</a> 
          </li> 

          <!-- pagina actual --> 
          <li class="page-item active disabled"> 
           <a>1</a> 
          </li> 

          <li class="page-item disabled"><a>2</a></li> 
          <li class="page-item disabled"><a>3</a></li> 
          <li class="page-item disabled"><a>4</a></li> 
          <li class="page-item disabled"><a>5</a></li> 

          <li class="page-item disabled"> 
           <a>Siguiente</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

       <!-- boton modificacion 'guardar' habilitado --> 
       <div id="btnModificacion" hidden> 
        <!-- boton indice --> 
        <button type="button" class="btn btn-primary botonIndice">Indice</button> 

        <!-- boton guardar --> 
        <button type="button" class="btn btn-primary botonModificar">Guardar</button> 

        <!-- paginacion --> 
        <nav aria-label="..."> 
         <ul class="pagination"> 
          <li class="page-item disabled"> 
           <a class="page-link" tabindex="-1">Anterior</a> 
          </li> 

          <!-- pagina actual --> 
          <li class="page-item active"> 
           <a href="#">1</a> 
          </li> 

          <li class="page-item"><a href="#" class="opcAsignatura">2</a></li> 
          <li class="page-item"><a href="${createLink(action: "descripcionAsignatura")}">3</a></li> 
          <li class="page-item"><a href="${createLink(action: "requisitosPrevios")}">4</a></li> 
          <li class="page-item"><a href="${createLink(action: "objetivos")}">5</a></li> 

          <li class="page-item"> 
           <a href="#" class="opcAsignatura">Siguiente</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

       <!-- boton reutilizacion 'guardar' con 'indice' y 'paginacion' deshabilitado --> 
       <div id="btnReutilizacion1" hidden> 
        <!-- boton indice --> 
        <button type="button" class="btn btn-primary botonIndice" disabled>Indice</button> 

        <!-- boton guardar --> 
        <button type="button" class="btn btn-primary botonReusar">Guardar</button> 

        <!-- paginacion --> 
        <nav aria-label="..."> 
         <ul class="pagination"> 
          <li class="page-item disabled"> 
           <a class="page-link" tabindex="-1">Anterior</a> 
          </li> 

          <!-- pagina actual --> 
          <li class="page-item active disabled"> 
           <a>1</a> 
          </li> 

          <li class="page-item disabled"><a>2</a></li> 
          <li class="page-item disabled"><a>3</a></li> 
          <li class="page-item disabled"><a>4</a></li> 
          <li class="page-item disabled"><a>5</a></li> 

          <li class="page-item disabled"> 
           <a>Siguiente</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

       <!-- boton reutilizacion 'guardar' con 'indice' y 'paginacion' deshabilitado --> 
       <div id="btnReutilizacion2" hidden> 
        <!-- boton indice --> 
        <button type="button" class="btn btn-primary botonIndice">Indice</button> 

        <!-- boton guardar --> 
        <button type="button" class="btn btn-primary botonReusar">Guardar</button> 

        <!-- paginacion --> 
        <nav aria-label="..."> 
         <ul class="pagination"> 
          <li class="page-item disabled"> 
           <a class="page-link" tabindex="-1">Anterior</a> 
          </li> 

          <!-- pagina actual --> 
          <li class="page-item active"> 
           <a href="#">1</a> 
          </li> 

          <li class="page-item"><a href="#" class="opcAsignatura">2</a></li> 
          <li class="page-item"><a href="${createLink(action: "descripcionAsignatura")}">3</a></li> 
          <li class="page-item"><a href="${createLink(action: "requisitosPrevios")}">4</a></li> 
          <li class="page-item"><a href="${createLink(action: "objetivos")}">5</a></li> 

          <li class="page-item"> 
           <a href="#" class="opcAsignatura">Siguiente</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

      </div> 

     </form> 
    </g:if> 

    </body> 
</html>

JQuery的文件：“NUEVO”在“Titulacion按钮“查看

//--- boton nuevo --- 
    $("#botonNuevo").click(function() { 

     //Borra todos los errores mostrados en pantalla 
     $("label.error").text(""); 

     if(compruebaSeleccioneOpcion() === true && compruebaSeleccionBlanco() === true){ 

      URL = enlaceObjetos.urlValidaGuia; 
      validaGuia = $("#idFormTitulacion").serialize(); 

      //peticion ajax para validar la guia docente 
      peticionConDatosCallBackAjax(URL, validaGuia, function (data){ 

       if(data.toString() === ""){ 

        //si no existe la guia docente, se accede al formulario 
        datos = $("#idFormTitulacion").serialize(); 
        window.location.href = '/GuiaDocente/index?' + datos + "#insercion"; 
       }else{ 

        mensaje = " La guía docente seleccionada ya existe."; 
        showDialogo(mensaje); 
       } 
      }); 
     }else{ 
      //muestra los errores en los selects al pulsar el boton 'nuevo' 
      showErrorNuevo(); 
     } 
    });

控制器：“GuiaDocente”

class GuiaDocenteController { 

     SelectService selectService 

     //--- portada --- 
     def index(){ 
      def usuarioLogueado = session.getAttribute("e-mail") 
      def titulacion = params.titulacion 
      def asignatura_esp = params.asignatura 
      def asignatura_ing = params.asignatura_ing 
      def cursoAcademico = params.cursoAcademico 
      def modalidad = params.modalidad 

      //consulta de base de datos para obtener la 'Titulacion' y la 'Asignatura' 
      def consultaTitulacion = selectService.consultaTitulacion(usuarioLogueado) 
      def consultaAsignatura = selectService.consultaAsignaturaParams(usuarioLogueado,titulacion) 

      [consultaTitulacion:consultaTitulacion, consultaAsignatura:consultaAsignatura, titulacion:titulacion, 
        asignatura_esp:asignatura_esp, asignatura_ing:asignatura_ing, cursoAcademico:cursoAcademico, 
        modalidad:modalidad] 
} 
}

** **注：**的“NUEVO”在“Titulacion”视图按钮的参数被捕获由控制器“GuiaDocente”。

来源

2017-08-15 Dimas Travieso

+1

add'method =“POST”'to the form？ –

+0

“Titulacion”视图有两个按钮“Nuevo”和“Buscar”。 –

+0

@DimasTravieso看起来像是使用'window.location.href'重定向到'index'操作，即GET请求，您无法使用GET请求隐藏url中的参数。使用Ajax使用POST方法提交请求，而不是仅执行'window.location.href'。 –

回答

0

其实有很多方法可以做到：

方法1.您只需在窗体中添加method="POST"（更好地利用<g:form>）元素一样<g:form id="idFormTitulacion" method="POST" controller="GuiaDocente" action="index">并在你的js代码只是提交使用jQuery $('#idFormTitulacion').submit();形式

方法2： ，你必须window.location.href = '/GuiaDocente/index?' + datos + "#insercion";的代码，写类似下面的代码使用jQuery提交Ajax请求，然后做什么逻辑ÿ你想在控制器方面。

var parameters = {'key':'value'} 
jQuery.ajax({ 
     type:'POST', 
     data: parameters, 
     url:'/GuiaDocente/index', 
     success:function (data, textStatus) { 
     //do something if you want 
     }, 
     error:function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Error!") 
     } 
});

来源

2017-08-15 15:35:50

+0

我选择了“方法2”，代码工作正常。现在，我想从“Titulacion”视图重定向到“Portada”视图，并以“Portada”形式显示参数的数据。你会怎么做？ –

+0

@DimasTravieso你的代码是什么？你是否在控制器中重定向？然后使用forward（）而不是redirect（）。 –

相关问题

 相关问题