web测试网页登录时报错，如何解决？(语言-java)

求解决，用Maven搭建的javrweb项目网页登录报错，测试环境：Windows10_64位、IDEA2023.1.3、JDK-20.0.2、Tomcat-10.1.11，Servlet和Maven已经配置好，JAVA环境配置也配置好了，问题如下：
启动Tomcat后能打开web网页，但点击登录按钮时没有反应，查看控制台提示，找不到LoginServlet

img


项目结构如下：

img


LoginServlet.java代码如下

package servlets;

import org.example.DbUtil;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.annotation.WebServlet;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        try {
            Connection connection = DbUtil.getConnection();
            PreparedStatement statement = connection.prepareStatement
                    ("SELECT * FROM user WHERE username=? AND password=?");
            statement.setString(1, username);
            statement.setString(2, password);
            ResultSet resultSet = statement.executeQuery();

            if (resultSet.next()) {
                // 登录成功
                response.sendRedirect("success.jsp");
            } else {
                // 登录失败
                response.sendRedirect("error.jsp");
            }

            resultSet.close();
            statement.close();
            DbUtil.closeConnection(connection);
        } catch (SQLException e) {
            e.printStackTrace();
            // 处理异常
        }
    }
}

web.xml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0"
         metadata-complete="false">
    <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>servlets.LoginServlet</servlet-class>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>
</web-app>

pom.xml代码如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>Fake</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>20</maven.compiler.source>
        <maven.compiler.target>20</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.33</version>
        <scope>system</scope>
        <systemPath>${project.basedir}/web/WEB-INF/lib/mysql-connector-j-8.0.33.jar</systemPath>
    </dependency>
        <dependency>
            <groupId>org.mortbay.jetty</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5-20081211</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
    </dependencies>

</project>

index.jsp代码如下：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/8/17
  Time: 18:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>管理系统</title>
  <script src="webapp/js/jquery.min.js" type="text/javascript"></script>
</head>
<title>登录页面</title>
<body>
<div>
  <div id="logo">
    <h1>考勤管理系统</h1>
  </div>
  <div id="login-form">
    <h3>
      <br><label for="username">登录名</label>
      <input type="text" id="username" placeholder="请输入工号">
      <br>
    </h3>
    <h3>
      <label for="password">登录密码</label>
      <input type="password" id="password" placeholder="登录密码">
    </h3>
    <from>
      <button id="entry_btn" type="button">登录</button>
    </from>
    <div class="prompt" id="prompt"></div>
  </div>
</div>
<style>
  body {
    background-image: url("webapp/imgs/02.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: -1;
  }

  #logo {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }

  #login-form {
    width: 200px;
    margin: 0 auto ;
    background-color:white;
    padding: 40px;
    text-align: center;
    border-radius: 5px;
  }

  #login-button {
    margin-top: 30px;
    padding:20px 20px;
    font-size: 30px;
    background-color: #FF8C00;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }
</style>
<script type="text/javascript">
  // 获取登录按钮元素
  var entryBtn = document.getElementById("entry_btn");

  // 绑定点击事件处理函数
  entryBtn.addEventListener("click", function() {
    // 获取用户名和密码输入框的值
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    // 创建一个 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

    // 设置请求方法和 URL
    xhr.open("POST", "LoginServlet", true);

    // 设置请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    // 监听请求状态变化
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 处理响应结果
          var result = xhr.responseText;
          if (result === "1") {
            // 登录成功，跳转到其他页面
            window.location.href = "dashboard.html";
          } else {
            // 登录失败，显示错误提示
            var prompt = document.getElementById("prompt");
            prompt.innerText = "用户名或密码错误";
          }
        } else {
          // 请求发生错误
          console.error("请求发生错误：" + xhr.status);
        }
      }
    };

    // 发送请求
    xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
  });
</script>
</script>
</body>
</html>

模块配置如下：

img

img

img

img

img

img

【补充一下】Tomcat安装目录下的jsp-api.jar和servlet-api.jar也复制在了lib目录下

img

请求地址写login就可以了，在servlet定义的时候定义了请求路径

【相关推荐】



  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/204236
  • 除此之外, 这篇博客: Java如何用Servlet写一个接口，部署在tomcat，通过url进行访问 —— （一）中的 四、创建一个类LoginServlet 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    创建方式有点特殊，不是直接右击project创建class,而是创建一个普通class，菜单->File->New->Class)
    注意：eclipse创建的时候会自带一个包名test，不要使用这个包名，让包名置空

    这个类需要继承HttpServlet ，而HttpServlet这个类提供了doPost方法，我们后面需要这个方法，来获取到客户提交参数。

    （注）这里的doPost方法代表只支持Post方式提交；像doGet方法只支持get方式； 而如果是Service方法的话，即代表支持所有方法提交。

    最后看到的是这个类放置于src目录下面

    import java.io.UnsupportedEncodingException;
import java.util.Base64;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
	String name = request.getParameter("name");
	String password = request.getParameter("password");
	System.out.println("name：" +name);
	System.out.println("password：" +password);
}

}

     

    五、创建web目录

    1、在项目下右键创建目录web  ,然后再创建web/WEB-INF ，然后在WEB-INF目录中创建 web.xml   

    web.xml文件内容：

    注意：/login 这个是你通过url访问这个接口的时候加上的

    <?xml version="1.0" encoding="UTF-8"?>
<web-app>
     <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping> 

</web-app>

    2、web目录下创建login.html

    注意：这里的"login" 需要和web.xml文件里的<url-pattern>/login</url-pattern> 名字对应，不然无法找到对应servlet

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
</head>
<body>
<form action="login" method="post">
用户名：<input type="text" name="name">
密码：<input type="text" name="password"><br/>
<input type="submit" value="登陆"> 


</form>
</body>
</html>

    3、指定项目输出到classes目录

    首先在WEB-INF下创建classes目录
    把项目的class文件输出由原来的test/bin  设置到 test/web/WEB-INF/classes下

    项目右键->properties->Java Build Path->Source->右下角的 Broswer-> 指定位置是 test/web/WEB-INF/classes

     


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

img