javascript - 如何使用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;
}
这是我的 Servlet，执行输入、编辑和删除操作
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>");
}
}