Skip to main content
2 de 2
se añadieron 1419 caracteres en el cuerpo; etiquetas editadas
Daniel
  • 353
  • 5
  • 21

Cargar tabla JSP con Ajax en success

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.

Daniel
  • 353
  • 5
  • 21