使用 JavaScript 验证后调用 Servlet 的正确方法-java教程-PHP中文网

使用 JavaScript 验证后调用 Servlet 的正确方法

心靈之曲

发布： 2025-08-28 17:50:02

原创

785人浏览过

使用 javascript 验证后调用 servlet 的正确方法

本文档旨在指导开发者如何在 JavaScript 验证客户端输入后，正确地调用 Servlet 来处理表单数据。我们将重点关注如何避免常见的 HTTP 405 错误，并提供清晰的代码示例和最佳实践，确保数据安全可靠地传输到服务器。

在 Web 开发中，客户端验证通常用于在数据提交到服务器之前检查其有效性，从而减少服务器的负担和提高用户体验。当 JavaScript 验证通过后，需要将数据发送到服务器端的 Servlet 进行进一步处理，例如数据库操作或业务逻辑处理。

1. 理解 HTTP 方法和 Servlet 调用

Servlet 通过 HttpServlet 类处理 HTTP 请求。常见的 HTTP 方法包括 GET 和 POST。GET 方法通常用于获取资源，而 POST 方法用于提交数据。Servlet 通过 doGet() 和 doPost() 方法分别处理这两种请求。

当你在 HTML 表单中使用 method="post" 时，浏览器会向 action 属性指定的 URL 发送一个 POST 请求。如果你的 Servlet 只实现了 doPost() 方法，而浏览器发送了 GET 请求，就会出现 HTTP 405 "Method Not Allowed" 错误。

立即学习“Java免费学习笔记（深入）”；

2. 解决 HTTP 405 错误

在原问题中，JavaScript 代码阻止了表单的默认提交行为，并且在验证失败后重新加载了页面。这导致浏览器在重新加载后尝试使用 GET 方法访问 Servlet，从而引发了 HTTP 405 错误。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

解决这个问题的方法是：

仅在验证失败时阻止表单提交，验证成功时允许表单按默认行为提交。
确保 Servlet 实现了 doPost() 方法来处理 POST 请求。

3. 修改后的 JSP 代码

<html>
<head><title>Login</title></head>
<link rel="stylesheet" href="css/style.css">
<body>
    <div class="Welcome-division">
        <div class="header-top"> <a href="/"><img class="logo" src="images/logo.png" alt="Hostel logo"></a>
            <H1>Welcome to Arihant's hostel</H1>
        </div>
        <navbar class="horizontal-navbar">
            <a href="Home.jsp">Home</a>
            <a class="active" href="Login.jsp">Login</a>
            <a href="Room details.jsp">Room Details</a>
            <a href="Contact Us.jsp">Contact Us</a>
        </navbar>
    </div>
    <div class="center-body">
        <navbar class="Menu-option">
            <a href="Home.jsp">Home</a>
            <a class="active" href="Login.jsp">Login</a>
            <a href="Room details.jsp">Room Details</a>
            <a href="Contact Us.jsp">Contact Us</a>
        </navbar>
        <div class="Room-information">

            <form class="loginForm" method="post" action="LoginServlet" id="loginForm"> 
                <div>Room No: <input type="text" name="Roomno" id="Rno"><br></div><br>
                <div>Password : <input type="password" name="password" id="pass"></div><br>
                <input id="formSubmit" type="submit" value="SUBMIT">  
                </form> 
        </div>
    </div>
    <div class="Copyright-Information">
        &#169; Arihant graphics
    </div>
   <script>
        const formSubmit = document.getElementById("formSubmit");
        const loginForm = document.getElementById("loginForm");

        formSubmit.addEventListener("click", (e) => {
            const Rno = document.getElementById("Rno").value;
            const Password = document.getElementById("pass").value;
            if (Rno == null || Rno == "" || Password.length < 7) {
                alert("Please enter a Room No or your password is incorrect");
                e.preventDefault(); // 阻止表单提交
                return; // 退出事件处理函数
            }
            // 如果验证通过，则允许表单提交
        });
    </script>

</body>
</html>

登录后复制

关键修改：

移除了 setTimeout(function () { window.location.reload(); }, 5000); 这一行，避免了不必要的页面重载。
在验证失败时，使用 e.preventDefault(); 阻止表单的默认提交行为。
在验证失败时，添加return;语句，避免后续代码执行，保证只在验证失败时阻止表单提交。
添加了form的id，方便js获取。

4. 修改后的 Servlet 代码 (保持不变)

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;
    public LoginServlet() {
        super();
        }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            PrintWriter out = response.getWriter();
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student","root","root");
            int roomNo = Integer.parseInt(request.getParameter("Roomno"));
            String password = request.getParameter("password");
            PreparedStatement ps = con.prepareStatement("select * from login where roomNo=? and password=?");
            ps.setInt(1, roomNo);
            ps.setString(2, password);
            ResultSet rs =  ps.executeQuery();

            if(rs.next()) {
              int userRoom = rs.getInt(1);
              String userName = rs.getString(3);
                out.println("RoomNo:"+userRoom+" is allocated to "+ userName);
                con.close();
            }
            else
                out.println("Failed to log in");

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

登录后复制

确保 Servlet 实现了 doPost() 方法来处理 POST 请求。