我正在尝试创建一个 servlet，它从我的数据库中检索信息，然后将其显示在板上。此外，我希望同一个板将点击信息发送到另一个 servlet，以便它可以正确保存在数据库中。
我知道从数据库中检索到的信息正在正确收集，但我无法显示棋子。现在我只能看到棋盘，没有棋子，是白色的。如果值为 1，我希望将它们涂成红色，如果值为 2，则涂成黄色。如果是任何其他值，则应留空或默认。此外，我不确定如何检索点击数据，因为我曾尝试使用 EventListener，但在尝试将其放入 servlet 时收到错误。这是我所指的 servlet 的代码：
import java.io.*;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.sql.*;
import java.util.*;
public class RecogeParaPintar extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
Connection con;
Statement st;
ResultSet rs;
PrintWriter out = res.getWriter();
String SQL, Nombre, IdPartida;
int IdUsu, Estado, i, j;
List<Integer> Casilla = new ArrayList<Integer>();
try {
IdPartida = req.getParameter("IdPartida");
Class.forName("com.mysql.cj.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost/cuatroenraya", "root", "");
st = con.createStatement();
SQL = "SELECT * FROM actualizacionpartida WHERE IdActu = '" + IdPartida + "'";
rs = st.executeQuery(SQL);
if (!rs.isBeforeFirst()) {
// No hay resultados
out.println("No se encontraron resultados");
} else {
while (rs.next()) {
for (i = 1; i <= 6; i++) {
for (j = 1; j <= 6; j++) {
Casilla.add(rs.getInt("C" + i + j));
}
}
}
}
// Código HTML:
res.setContentType("text/html");
out.print("<!DOCTYPE html>");
out.print("<html>");
out.print("<head>");
out.print("<meta charset=\"UTF-8\">");
out.print("<title>4 Tablero estilo Conecta 4</title>");
out.print("<style>");
out.print("table {");
out.print("border-collapse: collapse;");
out.print("margin: 200px auto;");
out.print("box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);");
out.print("border-radius: 10px;");
out.print("overflow: hidden;");
out.print("background-color: #104e8b;");
out.print("}");
out.print("td {");
out.print("width: 100px;");
out.print("height: 100px;");
out.print("border-radius: 50%;");
out.print("text-align: center;");
out.print("font-size: 1.5em;");
out.print("font-weight: bold;");
out.print("background-color: #f2f2f2;");
out.print("position: relative;");
out.print("cursor: pointer;");
out.print("transition: background-color 0.3s ease-in-out;");
out.print("}");
out.print(".piece {");
out.print("position: absolute;");
out.print("top: 0;");
out.print("left: 0;");
out.print("width: 100%;");
out.print("height: 100%;");
out.print("border-radius: 50%;");
out.print("box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);");
out.print("transform: scale(0);");
out.print("transition: transform 0.3s ease-in-out;");
out.print("}");
out.print(".piece.red {");
out.print("background-color: #ff4136;");
out.print("}");
out.print(".piece.yellow {");
out.print("background-color: #ffd700;");
out.print("}");
out.print("td:hover {");
out.print("background-color: #dddddd;");
out.print("}");
out.print("td.playable:hover {");
out.print("background-color: #90ee90;");
out.print("}");
out.print("</style>");
out.print("</head>");
out.print("<body>");
out.print("<form id=\"myForm\" method=\"post\" action=\"http://localhost:8080/Conecta4/FichasEnJuego\">");
out.print("<input type=\"hidden\" name=\"columna\" id=\"columna_seleccionada\" value=\"\">");
out.print("<input type=\"submit\" value=\"Enviar\">");
out.print("</form>");
out.print("<table id=\"board\">");
out.print("<tbody>");
for (int m = 1; m <= 6; m++) {
out.print("<tr>");
for (int n = 1; n <= 6; n++) {
int index = (m - 1) * 6 + n - 1; // Índice de la casilla correspondiente
int valor = Casilla.get(index); // Valor almacenado en esa casilla
String color = "";
if (valor == 1) {
color = "red";
} else if (valor == 2) {
color = "yellow";
}
out.print("<td class=\"playable\">");
out.print("<div class=\"piece " + color + "\"></div>");
out.print("</td>");
}
out.print("</tr>");
}
out.print("<console.log(columna_seleccionada)>");
out.print("</tbody>");
out.println("</html>");
rs.close();
st.close();
con.close();
} catch (Exception e) {
System.err.println(e);
}
}
}