Web应用中JavaScript验证与Servlet表单提交的协同工作

formSubmit.addEventListener("click", (e) => {
    // ... 验证逻辑 ...
    if (Rno == null || Rno == "" || Password.length < 7) {
        alert("Please enter a Room No or your password is incorrect");
        setTimeout(function () {
            window.location.reload();
        }, 5000);
    }
    e.preventDefault(); // 问题所在：无条件阻止了表单提交
})

public class LoginServlet extends HttpServlet {
    // ...
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 实现了doPost方法
    }
    // 没有实现doGet方法
}

<script>
    // 获取表单元素，而不是提交按钮
    const loginForm = document.querySelector(".loginForm"); 

    loginForm.addEventListener("submit", (e) => { // 监听表单的submit事件
        const Rno = document.getElementById("Rno").value;
        const Password = document.getElementById("pass").value;

        if (Rno === null || Rno.trim() === "" || Password.length < 7) {
            alert("请输入房间号，或密码长度不正确（至少7位）。");
            // 仅在验证失败时阻止表单的默认提交行为
            e.preventDefault(); 
            // 移除不必要的页面重载，因为它会清除用户输入，影响用户体验
            // setTimeout(function () { window.location.reload(); }, 5000); 
        }
        // 如果验证通过，不调用 e.preventDefault()，表单将正常以POST方式提交到LoginServlet
    });
</script>

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    // 建议在init方法中初始化数据库连接池或数据源，而不是在doPost中每次创建
    // public void init() throws ServletException { ... }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置响应内容类型和字符编码，避免中文乱码
        response.setContentType("text/html;charset=UTF-8"); 
        PrintWriter out = response.getWriter();
        Connection con = null; // 声明在try块外，以便finally中关闭
        PreparedStatement ps = null;
        ResultSet rs = null;

        try {
            // 1. 加载数据库驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 2. 建立数据库连接
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student","root","root");

            // 3. 获取并转换请求参数
            String roomNoStr = request.getParameter("Roomno");
            String password = request.getParameter("password");

            // 参数空值检查（尽管前端已做，后端仍需再次验证，以防绕过前端）
            if (roomNoStr == null || roomNoStr.trim().isEmpty() || password == null || password.trim().isEmpty()) {
                out.println("房间号或密码不能为空。");
                return; // 提前返回
            }

            int roomNo;
            try {
                roomNo = Integer.parseInt(roomNoStr);
            } catch (NumberFormatException e) {
                out.println("房间号格式不正确，请输入数字。");
                e.printStackTrace();
                return; // 提前返回
            }

            // 4. 使用PreparedStatement防止SQL注入
            ps = con.prepareStatement("select roomNo, userName from login where roomNo=? and password=?");
            ps.setInt(1, roomNo);
            ps.setString(2, password);

            // 5. 执行查询
            rs = ps.executeQuery();

            // 6. 处理查询结果
            if(rs.next()) {
                // 登录成功
                int userRoom = rs.getInt("roomNo"); // 推荐使用列名获取
                String userName = rs.getString("userName"); // 推荐使用列名获取
                out.println("登录成功！房间号: " + userRoom + " 分配给 " + userName);
                // 实际应用中，登录成功后通常会进行重定向或转发到用户主页
                // request.getSession().setAttribute("loggedInUser", userName);
                // response.sendRedirect("welcome.jsp"); 
            } else {
                // 登录失败
                out.println("登录失败！房间号或密码不正确。");
            }
        } catch (ClassNotFoundException e) {
            out.println("数据库驱动加载失败，请检查配置。");
            e.printStackTrace();
        } catch (SQLException e) {
            out.println("数据库操作异常，请稍后再试。");
            e.printStackTrace();
        } finally {
            // 7. 关闭资源，避免资源泄露
            try {
                if (rs != null) rs.close();
                if (ps != null) ps.close();
                if (con != null) con.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
            if (out != null) out.close(); // 确保PrintWriter关闭
        }
    }
}