Блог

Главная - Вопросы по программированию - Как обновлять таблицу в режиме реального времени с помощью ajax и JSP

Как обновлять таблицу в режиме реального времени с помощью ajax и JSP

#javascript #java #mysql #ajax #jsp

#javascript #java #mysql #ajax #jsp

Вопрос:

Я новичок в программировании, и у меня следующий вопрос.

Я хочу обновить таблицу через Ajax без необходимости нажимать какие-либо кнопки.

Например, если кто-то другой вводит запись в базу данных, я могу видеть записи, которые вводятся в режиме реального времени в моей таблице JSP.

Я оставляю свой код.

В этой части я показываю вводимые данные с помощью метода, который у меня есть в классе Employee

 <table class="table" id="tblEmpleados">
<thead class="thead-dark" style="text-align: center">
  <tr>
    <th>Nombres</th>
    <th>Apellidos</th>
    <th>Direccion</th>
    <th>Telefono</th>
    <th>Fecha Nacimiento</th>
    <th>Correo</th>
    <th>Usuario</th>
    <th>Puesto</th>
  </tr>
</thead>
<tbody id="tbl_empleados">
    <%
    Empleado empleado = new Empleado();
    DefaultTableModel tabla = new  DefaultTableModel();
    tabla = empleado.leerEmpleado();
    for ( int t=0; t<tabla.getRowCount();t  ){
        out.println("<tr data-id="  tabla.getValueAt(t, 0)  ">");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,1) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,2) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,3) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,4) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,5) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,6) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,7) "</td>");
        out.println("<td style='text-align: center'>" tabla.getValueAt(t,8) "</td>");
        out.println("</tr>");
    }
    %>
</tbody>

Это метод, который я вызываю в JSP

 public DefaultTableModel leerEmpleado (){

DefaultTableModel tabla = new  DefaultTableModel();
  try{
      cn = new Conexion();
      cn.abrir_conexion();
      String query="SELECT E.id_empleado AS id,E.nombres,E.apellidos,E.direccion,E.telefono,E.fecha_nacimiento,E.correo,U.usuario,P.puesto from empleado E inner join usuario U on E.id_usuario=U.id_usuario inner join puesto P on E.id_puesto=P.id_puesto;";
      ResultSet consulta = cn.conexionBD.createStatement().executeQuery(query);
      String encabezado [] = {"id","Nombre","Apellido","Direccion","Telefono","Fecha Nacimiento","Correo","Usuario","Puesto"};
      tabla.setColumnIdentifiers(encabezado);
      String datos [] = new String [9];
      while (consulta.next()){
      datos[0] = consulta.getString("id");
      datos[1] = consulta.getString("nombres");
      datos[2] = consulta.getString("apellidos");
      datos[3] = consulta.getString("direccion");
      datos[4] = consulta.getString("telefono");
      datos[5] = consulta.getString("fecha_nacimiento");
      datos[6] = consulta.getString("correo");
      datos[7] = consulta.getString("usuario");
      datos[8] = consulta.getString("puesto");
      tabla.addRow(datos);
      }
      cn.cerrar_conexion();
  }catch(SQLException ex){
      System.out.println(ex.getMessage());
  }
  
  return tabla;

}

и это мой сервлет, который выполняет операции ввода, редактирования и удаления

   Empleado empleado;
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    try (PrintWriter out = response.getWriter()) {
        /* TODO output your page here. You may use following sample code. */
        out.println("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head>");
        out.println("<title>Servlet sr_empleado</title>");            
        out.println("</head>");
        out.println("<body>");
           empleado = new Empleado(Integer.valueOf(request.getParameter("drop_usuario")),Integer.valueOf(request.getParameter("drop_puesto")),Integer.valueOf(request.getParameter("txt_id")),request.getParameter("txt_nombres"),request.getParameter("txt_apellidos"),request.getParameter("txt_direccion"),request.getParameter("txt_telefono"),request.getParameter("txt_fn"),request.getParameter("txt_correo"));
        // Boton agregar 
        if ("agregar".equals(request.getParameter("btn_agregar"))){
         if (empleado.agregar()>0){
         response.sendRedirect("CrudEmpleado.jsp");
         
         }else{
         out.println("<h1> xxxxxxx No se Ingreso xxxxxxxxxxxx </h1>");
         out.println("<a href='CrudEmpleado.jsp'>Regresar...</a>");
         }
         }
        
        // Boton modificar 
        if ("modificar".equals(request.getParameter("btn_modificar"))){
         if (empleado.modificar()>0){
         response.sendRedirect("CrudEmpleado.jsp");
         
         }else{
         out.println("<h1> xxxxxxx No se Modifico xxxxxxxxxxxx </h1>");
         out.println("<a href='CrudEmpleado.jsp'>Regresar...</a>");
         }
         }
        
        // Boton eliminar 
        if ("eliminar".equals(request.getParameter("btn_eliminar"))){
         if (empleado.eliminar()>0){
         response.sendRedirect("CrudEmpleado.jsp");
         
         }else{
         out.println("<h1> xxxxxxx No se Elimino xxxxxxxxxxxx </h1>");
         out.println("<a href='CrudEmpleado.jsp'>Regresar...</a>");
         }
         }
        out.println("</body>");
        out.println("</html>");
    }
}

Комментарии:

1. Где код ajax? Вы пробовали что-нибудь, чтобы достичь выше?