0

Buenas tardes con todos como puedo hacer que mi "tabla JSP" pueda recargar la lista de elementos que tiene en mi Base de datos con ajax, estoy usando Spring y JSTL.
Este es mi código "JSP - Bienvenido" para cargar los datos de mi BD

<tbody id="tbl_contenido">
    <c:forEach items="${datos}" var="dato">
    <tr>
        <td class="id"><c:out value="${dato.codigo_Pers}" /></td>
        <td><c:out value="${dato.nombre_Pers}" /></td>
        <td><c:out value="${dato.apellido_Pat_Pers}" /></td>
        <td><c:out value="${dato.apellido_Mat_Pers}" /></td>
        <td>
            <input type="button" value="Modificar js" class="btnModificar">
            <input type="button" value="Eliminar js" class="btnEliminar">
        </td>
    </tr>
    </c:forEach>
</tbody>

Con este código "JSP" simple inserto un registro. (Este código se encuentra en la misma página pero con un tabla diferente).

<tr>
    <td><label>Codigo</label></td>
    <td><input type="text" id="txtNombre_Pers"></td>
    <td><input type="text" id="txtApellido_Pat_Pers"></td>
    <td><input type="text" id="txtApellido_Mat_Pers"></td>
    <td><input type="button" id="btnRegistrar" value="Registrar persona"></td>
</tr>

Este es mi archivo "JQuery", y aquí es donde me quedo.

$('#btnRegistrar').click(function () {
    var nombre = $('#txtNombre_Pers').val();
    var apellidoPat = $('#txtApellido_Pat_Pers').val();
    var apellidoMat = $('#txtApellido_Mat_Pers').val();
    $.ajax({
        url: '../controladorPersona/procesarPersona',
        type: 'POST',
        data: {
            txtNombre:nombre,
            txtApellidoPat:apellidoPat,
            txtApellidoMat:apellidoMat
        },
        success: function (resultado) {
            alert("Se insertó correctamente.");
        }
    });
});

Bueno todo el código funciona y me inserta un registro correctamente incluso con el mensaje pero el único inconveniente que tengo es que en este código no se como hacer en success: function (resultado){...} para poder actualizar mi tabla de mi JSP sin recargar la página.
Este es mi Controlador donde recibo datos

@RequestMapping(value = "/procesarPersona")
public ModelAndView procesarPersona(HttpServletRequest request, HttpServletResponse response) throws SQLException, UnsupportedEncodingException{
    response.setContentType("text/html;charset=UTF-8");
    request.setCharacterEncoding("UTF-8");
    ModelAndView mv = new ModelAndView(); 
    String nombre = request.getParameter("txtNombre");
    String apellidoPat = request.getParameter("txtApellidoPat");
    String apellidoMat = request.getParameter("txtApellidoMat");
    Persona pers = new Persona(nombre, apellidoPat, apellidoMat);
    boolean resp = Persona_Dao.registrarPersona(pers);
    if(resp == true){
        mv.setViewName("redirect:/controladorVista/Bienvenido.htm"); 
    }else{
        mv.setViewName("redirect:/controladorVista/index.htm"); 
    }
    return mv;
}

Este controlador muestra la vista JSP, el cual su contenido ya está en la parte superior de esta pregunta.

@RequestMapping(value = "/Bienvenido.htm")
public ModelAndView Bienvenido() throws SQLException{
    ModelAndView mv = new ModelAndView();
    List<Persona> datos = Persona_Dao.listarPersonas();
    mv.addObject("datos", datos);
    mv.setViewName("Bienvenido");
    return mv; 
}

Un favor me podrían ayudar con el código "JQuery" que me falta, cualquier respuesta que me ayude a solucionar sería util.

2
  • Tu controlador debería retornar en formato de texto plano o json los datos que has guardado en la db, incluyendo el código que se le generó. sobretodo el código. Commented el 2 sept. 2019 a las 0:01
  • Hola @Christian Carrillo mi controlador donde registro retorna un ModelAndView que redirige a otro controlador donde ese retorna una "vista o página JSP" para mostrar la tabla el cual su estructura está escrito en la primera parte de esta pregunta. Entonces en que controlador debo retornar json en donde registro o en donde muestro los datos de mi tabla, o en los dos, de todos modos gracias por tomarte la molestia de responder.
    – Daniel
    Commented el 2 sept. 2019 a las 2:25

1 respuesta 1

0

Podrías usar esta lógica:

// target al tbody de la table
const $tblContenido = $('#tbl_contenido')
// target al btn Registrar
const $btnRegistrar = $('#btnRegistrar')
// target a los inputs
const $nombre = $('#txtNombre_Pers')
const $apellidoPat = $('#txtApellido_Pat_Pers')
const $apellidoMat = $('#txtApellido_Mat_Pers')

function simularRequestAlControlador(data) {
  // en data estaría la respuesta del servidor en este caso está como un
  // objeto de JS, que podría ser equivalente al json que retornaría el server
  data.codigo = 3 // hardcodeando el código que retornaría el servidor 
  
  // esta variable guarda el template de la fila que ingresarías a tu table
  // usando (template string) para interpolar las variables de un modo más legible
  const row = `
  	<tr>
      <td class="id">${data.codigo}</td>
      <td>${data.nombre}</td>
      <td>${data.apellido_Pat}</td>
      <td>${data.apellido_Mat}</td>
      <td>
        <input type="button" value="Modificar js" class="btnModificar">
        <input type="button" value="Eliminar js" class="btnEliminar">
      </td>
    </tr>
    `
  
  // inserta la fila dentro de la table
  $tblContenido.append(row)        
}

// listener al button registrar que llamará a la función simularRequestAlControlador
// luego de 3seg simulando el tiempo que demoraría en responder el servidor
$btnRegistrar.on('click', function() {
  const data = {
    nombre: $nombre.val(),
    apellido_Pat: $apellidoPat.val(),
    apellido_Mat: $apellidoMat.val()   
  }
  setTimeout(function() { 
    simularRequestAlControlador(data) 
  }, 3000);
})
.registro {
  display: flex;
  flex-direction: column;
}

h4 {
  display: flex;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4>Registrar<h4>
<div class="registro">
  Nombre<input type="text" id="txtNombre_Pers">
  Apellido_Pat<input type="text" id="txtApellido_Pat_Pers">
  Apellido_Mat<input type="text" id="txtApellido_Mat_Pers">
    <input type="button" id="btnRegistrar" value="Registrar persona">
</div>

<h4>Personas<h4>
<table>
  <thead>
    <tr>
      <th>codigo</th>
      <th>nombre</th>
      <th>apellido_Pat</th>
      <th>apellido_Mat</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="tbl_contenido">
    <tr>
      <td class="id">1</td>
      <td>foo</td>
      <td>x</td>
      <td>y</td>
      <td>
        <input type="button" value="Modificar js" class="btnModificar">
        <input type="button" value="Eliminar js" class="btnEliminar">
      </td>
    </tr>
    <tr>
      <td class="id">2</td>
      <td>bar</td>
      <td>x</td>
      <td>y</td>
      <td>
        <input type="button" value="Modificar js" class="btnModificar">
        <input type="button" value="Eliminar js" class="btnEliminar">
      </td>
    </tr>
  </tbody>
</table>

2
  • Gracias @Christian Carrillo por el aporte que me brindas, pero si lo hago con json ¿el procedimiento sería el mismo? o varía mucho.
    – Daniel
    Commented el 2 sept. 2019 a las 16:34
  • si el controlador o endpoint responde con un json si, si respondes en texto plano/string tendrías que parsearlo. Commented el 3 sept. 2019 a las 2:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.